|File Size:||4.64 KB|
|Official Website:||Go to website|
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