Author: | Paul-Browne |
---|---|
Views Total: | 462 views |
Official Page: | Go to website |
Last Update: | September 2, 2018 |
License: | MIT |
Preview:

Description:
A modern, fast, lightweight image lazy load JavaScript library that provides 2 methods to lazy load images with support for retina and responsive images.
- lazyestload.js: Load images only when they are within 100 px and remain in the viewport, and when the user has stopped scrolling
- lazyload.js: Traditional lazyloader – Images load when they are within 100px of the bottom of the screen.
How to use it:
Load the ‘lazyestload.js’ or ‘lazyload.js’ library in the html document.
<script src="js/lazyestload.min.js"></script>
Add the ‘lazyestload’ class to the image tag.
- src: the path to the placeholder.
- data-src: the path to the image to lazy load
<img class="lazyestload" src="placeholder.jpg" data-src="image.jpg" >
The library also supports retina/responsive image and ‘picture’ tag.
<img class="lazyestload" src="placeholder.jpg" data-srcset="image-1x.jpg 1x, image-2x.jpg 2x, image.jpg 3x" > <img class="lazyestload" src="placeholder.jpg" data-srcset="images.jpg 300w, images.jpg 800w" >
<picture> <source media="(max-width: 300px)" data-srcset="image-sm.jpg" > <source media="(max-width: 1200px)" data-srcset="image.jpg" > <img class="lazyestload" src="placeholder.jpg" > </picture>