Load images After Page Load In JavaScript – Blurry Image Load

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