ProperJS // ImageLoader
=======================
> Bullet-proof lazy-loading images with contextual load conditions.
### Installation
```shell
npm i properjs-imageloader --save-dev
```
### Usage
Given a set of elements on the page such as this. Also see the `test` setup which loads over 40 images from [kitajchuk.com](https://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" );
});
```
```
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" );
});
```