Loading Images On The Page Asynchronously – lazyLoadImage

Preview:

Description:

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.

lazyLoadImage.start();

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 />
  ...
</div>