ProperJS // ImageLoader
Bullet-proof lazy-loading images with contextual load conditions.
Installation
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.
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.
; const loader = elements: document property: "data-src" // default { // default const bounds = el; return boundstop < windowinnerHeight && boundsbottom > 0; } loadType: "async" // default; loader;