Minimalist Image Lazy Load Plugin - jQuery lazy.js

lazy.js is a very small jQuery lazy load plugin which can be used to save load time and data usage by avoiding downloading images that are out of the viewport.

How to use it:

1. Download and load the lazy.js script after you've loaded the latest jQuery library in the document.

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="js/lazy.js"></script>

2. Put the image sources into the data-img-src attributes as these:

<img class="lazy-img" 
     data-awake="false" 
     data-img-src="1.jpeg"
>

...

<img class="lazy-img" 
     data-awake="false" 
     data-img-src="2.jpeg"
>

...

3. That's it. The lazyLoad() function comes with 3 parameters:

• animationDuration: the time to take the function for display the image, default = 300ms.
• windowPosition: the position that the omage have to be for start to beeing displayed, default = 0 (the image will be displayed when it top touch the bottom of the window)
• opacityLevel: the final opacity of the image, default = 1.0

lazyLoad(2000,window.innerHeight, 1);

---

This awesome jQuery plugin is developed by abelardogg. For more Advanced Usages, please check the demo page or visit the official website.