Responsive Image/HTML Content Lazy Load JavaScript Library – responsivelyLazy

Preview:

Description:

responsivelyLazy is an ultra-light javascript library that allows you to delay the loading of appropriate images (and even HTML content) based on the width of their parent containers. Help you speed up the initial page load time to provide a better user experience.

How to use it:

1. Load the responsivelyLazy’s JavaScript in the document.

<script async src="responsively-lazy.min.js"></script>

2. Use the data-responsively-lazy attribute to specify a group of images for different screen resolutions.

<img 
  src="2500.jpg"
  srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  data-responsively-lazy="500.avif 500w avif, 500.webp 500w webp, 500.jpg 500w, 800.avif 800w avif, 800.webp 800w webp, 800.jpg 800w, 1500.avif 1500w avif, 1500.webp 1500w webp, 1500.jpg 1500w, 2500.avif 2500w avif, 2500.webp 2500w webp, 2500.jpg 2500w" />
</div>

3. The library also supports lazy loading of background images:

<div
  data-responsively-lazy="500.avif 500w avif, 500.webp 500w webp, 500.jpg 500w, 800.avif 800w avif, 800.webp 800w webp, 800.jpg 800w, 1500.avif 1500w avif, 1500.webp 1500w webp, 1500.jpg 1500w, 2500.avif 2500w avif, 2500.webp 2500w webp, 2500.jpg 2500w"
  data-responsively-lazy-type="background">
</div>

4. And HTML content.

<div 
  data-responsively-lazy="hello world" 
  data-responsively-lazy-type="html">
</div>

5. Specify how close to the viewport an image should be to start loading.

<img 
  src="2500.jpg"
  srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  data-responsively-lazy="500.avif 500w avif, 500.webp 500w webp, 500.jpg 500w, 800.avif 800w avif, 800.webp 800w webp, 800.jpg 800w, 1500.avif 1500w avif, 1500.webp 1500w webp, 1500.jpg 1500w, 2500.avif 2500w avif, 2500.webp 2500w webp, 2500.jpg 2500w"
  data-responsively-lazy-threshold="50%" />
</div>

6. Trigger the lazy loading manually.

responsivelyLazy.run()

Changelog:

v3.2.1 (04/30/2024)

• Add ‘ignoreThreshold’ option.
• Optimize loading.

v3.1.0 (01/23/2024)

• Add support for encoded image paths/urls.

v3.0.1 (01/01/2024)

• Fix loading not visible images and images with unknown sizes.

v3.0.0 (12/30/2023)

• Added support for AVIF
• Added configurable threshold
• Added lazy loading background images.
• Enabled debugging by setting a cookie value.
• Optimized image loading when multiple requested.
• Added argument to responsivelyLazy.run(element).
• New HTML attributes.
• Removed responsivelyLazy.isVisible()
• Removed the CSS file.

07/31/2018

• Fix for data-lazycontent in IE.