Loading Images On The Page Asynchronously – lazyLoadImage

Category: Javascript , Loading | April 14, 2021
Views Total:114 views
Official Page:Go to website
Last Update:April 14, 2021


Loading Images On The Page Asynchronously – lazyLoadImage


A tiny image lazy load JavaScript library that loads images within the document asynchronously to improve page speed.

More Features:

  • Also supports background images.
  • Detect dom changes using the MutationObserver API.

How to use it:

1. Import the lazyLoadImage.js JavaScript library in the document.

<script src="./lazyLoadImage.js"></script>

2. Start tracking elements to be lazily loaded.


3. Embed images into the document using the data-src attribute:

<img data-src="example.jpg" />

4. Load the image when the boundary of the image or its parent element is scrolled into view.

<img data-src="example.jpg" data-viewport />
<img data-src="example.jpg" data-viewport="parent" />

5. Specify the offset for the boundary.

<img data-src="example.jpg" data-viewport="parent" data-offset="-500" />

6. Lazy load the background image of your container.

<div class="hasBg" data-src="bg.jpg" data-css />

You Might Be Interested In:

Leave a Reply