Intersection Observer Based Image Lazy Load Library – io-lazyload

Category: Javascript , Loading , Recommended | January 12, 2018
Author: cdowdy
Views Total: 147
Official Page: Go to website
Last Update: January 12, 2018
License: MIT


Intersection Observer Based Image Lazy Load Library – io-lazyload


io-lazyload is an extremely fast JavaScript library for lazy loading images that uses IntersectionObserver API to handle image 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

Leave a Reply