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();