Load images After Page Load In JavaScript – Blurry Image Load

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