[Blurry] A Progressive Load Images After Page Load Library

Blurry Image Load is a lightweight, no-dependency library that loads images on demand. In order for the images to load, a very small version of each image is displayed with a blur filter over it. Inspired by Medium’s progressive photo upload in a similar style.

The library defers uploading pictures until everything inside the page has been fully loaded. It displays a blur effect on the image before uploading it inspired by the medium’s progressive loading.

Must Read – Modal Window Based On jQuery and GSAP With Motion Blur Effect

How to make use of it:

Import the Blurry Image Load’s JavaScript and CSS into the doc.

<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 picture within 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 photos.

blurryImageLoad.load();
// or
blurryImageLoad.load([
  document.querySelector(".img-1"),
  document.querySelector(".img-2"),
  document.querySelector(".img-3"),
]);

Load images After Page Load, Blurry Image Load Plugin/Github, load blurry image first, load low res image first

Blurry Image Load


See Demo And Download

Official Website(dombrant): Click Here

This superior jQuery/javascript plugin is developed by dombrant. For extra Advanced Usage, please go to the official website.

Share