Modern Retina-ready Image Lazy Loader – lazyestload.js

Category: Image , Javascript , Loading , Recommended | September 2, 2018
Author:Paul-Browne
Views Total:462 views
Official Page:Go to website
Last Update:September 2, 2018
License:MIT

Preview:

Modern Retina-ready Image Lazy Loader – lazyestload.js

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>

You Might Be Interested In:


Leave a Reply