Load images After Page Load In JavaScript – Blurry Image Load

Category: Image , Javascript , Loading | August 28, 2018
Author: dombrant
Views Total: 191
Official Page: Go to website
Last Update: August 28, 2018
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">

Changelog:

v2.0.0 (08/28/2018)

  • switched using a load event listener to DOMContentLoaded

Leave a Reply