Load images After Page Load In JavaScript – Blurry Image Load

Category: Image , Javascript , Loading | April 21, 2019
Author: dombrant
Views Total: 759
Official Page: Go to website
Last Update: April 21, 2019
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:

04/21/2019

  • updated dependencies

v2.0.0 (08/28/2018)

  • switched using a load event listener to DOMContentLoaded

You Might Be Interested In:


Leave a Reply