A small JavaScript image lazy loading library with Intersection Observer

io-lazyload is an extremely fast JavaScript library for lazy loading images that uses IntersectionObserver API to handle image position detection. IntersectionObserver is a fairly new web API that makes lazy loading images extremely easy. How easy is to to lazy load with IntersectionObserver? You can do it in about ≈20 lines of code if you don’t need a polyfill.

Libraries

Load the following libraries on page.

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

HTML

Add the class of lazyload to the image(s) you wish to lazyload and
modify the src attribute to read data-src

="img/image.jpg" alt="your alt text" class="lazyload" >

JS

Initialize the script before the closing body tag (or in your own JS file)

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

lazy load all images with the class ‘lazy’

<script>
  document.addEventListener("DOMContentLoaded", function () {
    new IOlazy({
       image: '.lazy'
    });
});
script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    new IOlazy({
       image: 'img'
    });
});
script>

See live demo and download source code.

This awesome plugin is developed by cdowdy. Visit their official github repository for more information and follow for future updates.

Related