The Lazyload.js is a super lightweight plugin which helps you to add lazy loading effect into images to speed up your web application. The images will not load until the user scroll down the page.
On Scroll the page, the images will start automatically load. The plugin is written in plain Vanilla javascript and supports wide-range of browsers. It is an SEO friendly plugin and gives full support to mobile devices.
How to use Lazy Loading Images Plugin?
To implement on your webpage, you simply need to call one javascript file in the header.
<script src="script/lazyload.min.js"></script>
Simply add the class lazy into image or images to load them lazily.
<img class="lazy" alt="Photo" data-src="../img/44721746JJ_15_a.jpg" width="220" height="280">
When to use: you want to lazily load responsive images using the srcset and the sizes attribute.
<img class="lazy" data-src="/your/image1.jpg"
data-srcset="/your/image1.jpg 200w, /your/image1@2x.jpg 400w"
data-sizes="(min-width: 20em) 35vw, 100vw">Make sure to Initialize the lazy load functionality on your images with one JS call.
var myLazyLoad = new LazyLoad({
elements_selector: ".lazy"
});