Loading Images On The Page Asynchronously – lazyLoadImage

Category: Javascript , Loading | April 14, 2021
Author: EXPORTER-DEV
Views Total: 44 views
Official Page: Go to website
Last Update: April 14, 2021
License: MIT

Preview:

Loading Images On The Page Asynchronously – lazyLoadImage

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>

You Might Be Interested In:


Leave a Reply