Responsive Lazy Loader

Responsive Lazy Loader is a lightweight script that loads your images when they enter the viewport. Not only that but it honours your responsive (srcset) images.

Installation

yarn

yarn add responsive-lazy-loader

npm

npm install responsive-lazy-loader

Usage

Ensure your <img /> tags have a data-src attribute with a path to your image and a default image src. After you've initialised the script, your images will lazy load out of the box. For example:

JS:

import ResponsiveLazyLoader from 'responsive-lazy-loader';

new ResponsiveLazyLoader();

HTML:

<img data-src="http://via.placeholder.com/800x600"
	src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
	alt="My Special Image"
/>

Once the image comes into view, it will output:

<img src="http://via.placeholder.com/800x600"
	alt="My Special Image"
/>

The script also takes into account srcset and sizes by binding them to data attributes. For example:

<img data-src="http://via.placeholder.com/800x600"
	data-srcset="http://via.placeholder.com/400x300 400w, http://via.placeholder.com/800x600 800w"
	data-sizes="(max-width: 500px) 400px, 800px"
/>

You can also lazyload picture tags using this ibrary. Please bear in mind that picture tag is not supported in all browsers. In order to make picture tag work you need to use a picture tag polyfill such as picturefill

<picture>
	<source	data-srcset="http://via.placeholder.com/400x300" media="(max-width: 500px)" />
	<source data-srcset="http://via.placeholder.com/800x600" />
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
        data-src="http://via.placeholder.com/200x200"
        class=""
        alt="" />
</picture>

Parameters

(src, srcset, sizes, callback, loadOnScroll, resizeDebounce, throttle, threshold)

MIT