A lazy loading and multi-serving image script.
Hqy-lazyload works in all modern browsers including IE7+.

Get Started

Install using npm

To install the latest release of hqy-lazyload:

npm install hqy-lazyload

Try It Out

The following example is a lazy loading multi-serving responsive images example with a image callback, If your device width is smaller than 420 px it'll serve a lighter and smaller version of the image.

HTML:

<img 
    class="hqy-lazy"
    src="placeholder-image.jpg"
    data-src="image.jpg"
    data-src-small="small-image.jpg"
    alt="Image description"
/>

JavaScript:

var hqyLazy = new HqyLazyload({
    breakpoints: [{
        width: 420, // Max-width
        src: 'data-src-small'
    }],
    success: function (element) {
        // We want to remove the loader gif now.
        // First we find the parent container
        // then we remove the "loading" class which holds the loader image
        var parent = element.parentNode;
        parent.className = parent.className.replace(/\loading\b/,'');
    }
});

Results: