Responsive Image Lazy Load JavaScript Library – responsivelyLazy

Preview:

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.