Modern Retina-ready Image Lazy Loader – lazyestload.js

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>