Intersection Observer Based Image Lazy Load Library – io-lazyload

Category: Javascript , Loading , Recommended | June 20, 2020
Views Total:76 views
Official Page:Go to website
Last Update:June 20, 2020


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=""></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,

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


v2.1.0 (06/20/2020)

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


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

You Might Be Interested In:

Leave a Reply