Load images After Page Load In JavaScript – Blurry Image Load

Category: Image , Javascript , Loading | April 24, 2020
Author: dombrant
Views Total: 335 views
Official Page: Go to website
Last Update: April 24, 2020
License: MIT

Preview:

Load images After Page Load In JavaScript – Blurry Image Load

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.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

You Might Be Interested In:


Leave a Reply