Lazy load

Speeds up your web application with lazy load


We have implemented lazy load demo on index-lazy.html page only. As, not every developer/user wants lazy load. You can set lazy load in your webpage as per your need. Follow below Introduction to enable lazy load.

Add Required JS
<script src="assets/vendor/vanilla-lazyload/lazyload.min.js"></script>

In order to make your content be loaded by LazyLoad, you must use some data- attributes instead of the actual attributes along with .lazy class. Examples below.

Lazy image
<img class="lazy" data-src="assets/images/blog/4by3/03.jpg" alt="Image">
Lazy image with low quality placeholder:
<img class="lazy" data-src="assets/images/blog/4by3/03.jpg" src="lowQualityImage.jpg" alt="Image">
Lazy background image:
<div class="lazy" data-bg="assets/images/blog/1by1/02.jpg" style="background-position: center left; background-size: cover;"></div>

Visit plugin Vanilla lazyload on Github for full documentation