lozad.js – highly performant, light and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API
In HTML, add an identifier to the element (default selector identified is lozad class):
<!-- responsive image example -->
<img class="lozad" data-src="img/logo_blue.png" data-srcset="img/logo_blue.png, img/logo_blue@2x.png 2x" alt="DiDent">
“img/logo_blue@2x.png 2x” for Retina Display
For use with background images:
<!-- background image example -->
<div class="lozad" data-background-image="img/logo_blue.png">
...
</div>
