lazy-load-images
v1.0.1
Published
A Live on Stage plugin to lazy load images.
Downloads
108
Readme
Lazy Load Images
A Live on Stage plugin to load images only when they appear on screen.
Install
NPM
First install Lazy Load Images in your project root:
$ npm install lazy-load-images
Then include in your module using require() and run the init
method:
var lazyLoadImages = require('lazy-load-images');
lazyLoadImages.init();
Use
By default, Lazy Load Images tracks images with a data-lazy-load-src
attribute:
<img data-lazy-load-src="/foo/bar.png" />
When an image is successfully downloaded, the img
element will be given a lazy-loaded
class which you can use as a hook in your CSS to fade the image in.
A lazy loaded image tag will look like this:
<img src="/foo/bar.png" data-lazy-load-src="/foo/bar.png" class="lazy-loaded" />
New images
When the DOM changes, it's necessary to rescan the page for new images with a data-lazy-load-src
tag. Simply use the refresh
method:
lazyLoadImages.refresh();