0.2.2 • Published 6 years ago
responsive-lazy-loader v0.2.2
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 add responsive-lazy-loader
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