Author: | EXPORTER-DEV |
---|---|
Views Total: | 103 views |
Official Page: | Go to website |
Last Update: | April 14, 2021 |
License: | MIT |
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>