edwinbos/laziness

Lazy loading of images using the Interaction Observer API that is providing observing changes asynchronously

Laziness - A lazyload javascript plugin

Lazyload images with Laziness

Lazy loading of images using the Interaction Observer API that is providing observing changes asynchronously.

Example

See the Laziness demo.

How to use Laziness

Add laziness to your head:

<script type="text/javascript" src="assets/js/laziness.js"></script>

And call the plugin:

document.addEventListener('DOMContentLoaded', function() {
    lazyLoad.init({
        rootMargin: '300px 0px 0px 0px', // margin around the root
        threshold: 0 // a value of 1.0 means that the threshold isn't considered passed until every pixel is visible
    });
});

Default images

Use data-src instead of src:

<img alt="Loch Ness"
     class="lazyload"
     data-src="https://www.example.com/image.jpg"
/>

For valid HTML use a transparent pixel:

<img alt="Loch Ness"
     class="lazyload"
     data-src="https://www.example.com/image.jpg"
     src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
/>

Images that are in the viewport but not visible are not loaded. When the image becomes visible the image is loaded.

Use lazyload on -element:

<picture class="lazyload">
    <source media="(max-width: 799px)" data-srcset="https://www.example.com/image-1.jpg">
    <source media="(min-width: 800px)" data-srcset="https://www.example.com/image-2.jpg">
    <img data-src="https://www.example.com/image-1.jpg" alt="Loch Ness">
</picture>

Use lazyload on src-set. Use data-srcset instead of srcset:

<img data-srcset="https://www.example.com/550.jpg 550w,
                  https://www.example.com/980.jpg 980w,
                  https://www.example.com/1141.jpg 1141w,
                  https://www.example.com/1509.jpg 1509w"
     data-sizes="(max-width: 550px) 550px,
                 (max-width: 980px) 980px,
                 (max-width: 1141px) 1141px,
                 1509px"
     data-src="https://www.example.com/550.jpg" alt="Loch Ness" class="lazyload"
/>

Background images

Background images works the same as default images, if set on a non img-element.

<div data-src="https://www.example.com/image.jpg"></div>

Browser support for Laziness

If the browser supports the InteractionObserver the API is used, but if the browser not supports the InteractionObserver all the images are placed on load.

Browser	Using InteractionObserver	Just place the images
Chrome	51+	-
Firefox	55+	-
Edge	16+	15+
Safari	Not supported	9,10,11?
Opera	38+	-

More about the browser support of IntersectionObserver: https://caniuse.com/#search=IntersectionObserver