Author: | dombrant |
---|---|
Views Total: | 142 views |
Official Page: | Go to website |
Last Update: | July 23, 2023 |
License: | MIT |
Preview:

Description:
Blurry Image Load is another image lazy load library in pure JavaScript.
The library defers the loading of images until everything within the page has been completely loaded.
It displays a blur effect on the image before loading inspired by Medium’s progressive image loading.
How to use it:
Import the Blurry Image Load’s JavaScript and CSS into the document.
<link rel="stylesheet" href="blurry-load.min.css"> <script src="blurry-load.min.js"></script>
Add the CSS class ‘blurry-load’ to your img tag and specify the larger version of the image in the ‘data-large’ attribute as follows:
<img class="blurry-load" src="small.jpg" data-large="original.jpg">
Initialize the Blurry Image Load library.
const blurryImageLoad = new BlurryImageLoad();
Load images.
blurryImageLoad.load(); // or blurryImageLoad.load([ document.querySelector(".img-1"), document.querySelector(".img-2"), document.querySelector(".img-3"), ]);
Changelog:
v3.1.0 (07/23/2023)
- changed load method to not require an array be passed
- removed build tools and minified versions
v3.0.0 (04/24/2020)
- updated dependencies
- removed unecessary images variable
v2.0.0 (08/28/2018)
- switched using a load event listener to DOMContentLoaded