properjs-imageloader

ProperJS // ImageLoader
=======================

> Bullet-proof lazy-loading images with contextual load conditions.

$3

``shell
npm i properjs-imageloader --save-dev
`




$3


Given a set of elements on the page such as this. Also see the test setup which loads over 40 images from kitajchuk.com.
`html



`

You can pool them into a manager for loading in this manner. The executor is what determines the criteria for an image in the pool actually loading, the default is to be within the viewport. The built-in executor uses getBoundingClientRect() to check an image or element's position within the viewport.
`javascript
import ImageLoader from "../ImageLoader";

const loader = new ImageLoader({
elements: document.querySelectorAll( ".image" ),
property: "data-src", // default
executor: ( el ) => { // default
const bounds = el.getBoundingClientRect();

return (bounds.top < window.innerHeight && bounds.bottom > 0);
},
loadType: "async", // default
});

loader.on( "load", ( el ) => {
console.log( "loaded", el.src );

}).on( "error", ( el ) => {
console.log( "error", el.src );

}).on( "done", () => {
console.log( "done" );
});
``