Intersection Observer Based Image Lazy Load Library – io-lazyload

io-lazyload is an extremely fast JavaScript library for lazy loading images/ifames/backgrounds that uses IntersectionObserver API to handle position detection.

How to use it:

Include both IntersectionObserver polyfill and io-lazyload script on the webpage.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
<script src="iolazy.min.js" defer></script>

Insert your images using ‘data-src’ attribute and add the ‘lazyload’ class to ‘img’ tag:

<img data-src="1.jpg" alt="" class="lazyload" >

Initialize the io-lazyload library on document ready and done.

document.addEventListener("DOMContentLoaded", function () {
  new IOlazy();
});

The library also supports responsive images using ‘srcset’ attribute.

<img srcset="320w.jpg 320w,
             480w.jpg 480w,
             800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="placeholder.jpg"
     class="lazyload">

Change the default CSS class to trigger the lazy load.

new IOlazy({
    image: '.lazy'
});

Specify how much the imageshould be visible before loading the image.

new IOlazy({
    threshold: 0.5
});

Changelog:

v2.1.0 (06/20/2020)

• loading class can now be applied to anything. ie iframes, for bg images.

10/25/2018

• Passes root margin as a string updates example to use rootMargin as well