respondent-image
npm i -S respondent-image
Idea
Based off of responsively-lazy
- optimized for performance using requestAnimationFrame
- better api: manually
.update()
,.maximize()
or.destroy()
- background image support
- request optimization: resizing smaller doesn't trigger image loads
Setup: html
<!-- sample image -->
<img src="images/2500.jpg" data-srcset="images/400.jpg 400w, images/400.webp 400w, images/600.jpg 600w, images/1000.jpg 1000w" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
<!-- sample bg -->
<div data-bg="images/2500.jpg" data-srcset="images/400.jpg 400w, images/400.webp 400w, images/600.jpg 600w, images/1000.jpg 1000w"></div>
// the default image, for SEO and browsers that don't support srcsetsrc="images/2500.jpg"// the image definition for responsive imagesdata-srcset="images/400.jpg 400w, images/400.webp 400w, images/600.jpg 600w, images/1000.jpg 1000w"// a small, base64 encoded image that prevents the src from loadingsrcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
Usage: js
Plain old js:
const respondent = ; // all the images;// a particular image; // an element with a backgroundrespondent; // calling respondent returns an array of instancesconst results = ;// results => [inst, inst, inst ...]
With jQuery:
const $ = ;; ;;
As a React component:
NOTE: uses Object Rest Spread proposal, following React's recommendations. The babel plugin transform-object-rest-spread will be needed.
const Img = ;const render = { return <Img ="images/2500.jpg" ="images/400.jpg 400w, images/400.webp 400w, images/600.jpg 600w, images/1000.jpg 1000w" /> ;}; const Bg = ;const render = { return <Bg ="images/2500.jpg" ="images/400.jpg 400w, images/400.webp 400w, images/600.jpg 600w, images/1000.jpg 1000w" /> ;};