Responsive Image Lazy Load JavaScript Library – responsivelyLazy

Category: Javascript , Loading , Recommended | July 31, 2018
Author: ivopetkov
Views Total: 2,095
Official Page: Go to website
Last Update: July 31, 2018
License: MIT

Preview:

Responsive Image Lazy Load JavaScript Library – responsivelyLazy

Description:

responsivelyLazy is an ultra-light javascript library which allows you to delay the loading of appropriate images based on the width of their parent containers. Help you speed up the initial page load time to provide better user experience.

How to use it:

Load the responsivelyLazy’s JavaScript and CSS in the document.

<link href="responsivelyLazy.css" rel="stylesheet">
<script src="responsivelyLazy.js"></script>

Use data-srcset to specify a group of images for different screen resolutions.

<div class="responsively-lazy">
  <img src="placeholder.png" 
     data-srcset="image1.jpg 100w, image2.jpg 200w, image3.jpg 300w, ..."
  >
</div>

Changelog:

07/31/2018

Fix for data-lazycontent in IE.

You Might Be Interested In:

Leave a Reply