Author: | cdowdy |
---|---|
Views Total: | 76 views |
Official Page: | Go to website |
Last Update: | June 20, 2020 |
License: | MIT |
Preview:

Description:
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