Progressive Image lazy Loading With Blur Effect

Category: Image , Javascript , Loading , Recommended | June 3, 2017
Views Total:12,788 views
Official Page:Go to website
Last Update:June 3, 2017


Progressive Image lazy Loading With Blur Effect


A small script to progressively load images with a blur effect. The script will show your low res image with a progressive blur until the high res image has been loaded entirely.

How to use it:

Add the low-res and high-res images to the webpage as this:

<a class="card-image" href="#" style="background-image: url(;" data-image-full="">
  <img src="" alt="Eli DeFaria" />

The required CSS styles for the image lazy loading effect.

.card-image {
  display: block;
  min-height: 20rem; /* layout hack */
  background: #fff center center no-repeat;
  background-size: cover;
  filter: blur(3px); /* blur the lowres image */
.card-image > img {
  display: block;
  width: 100%;
  opacity: 0; /* visually hide the img element */
} {
  filter: none; /* remove the blur on fullres image */
  transition: filter 1s;

The core JavaScript to activate the image lazy loading effect.

window.addEventListener('load', function() {
  // setTimeout to simulate the delay from a real page load
  setTimeout(lazyLoad, 1000);
function lazyLoad() {
  var card_images = document.querySelectorAll('.card-image');
  // loop over each card image
  card_images.forEach(function(card_image) {
    var image_url = card_image.getAttribute('data-image-full');
    var content_image = card_image.querySelector('img');
    // change the src of the content image to load the new high res photo
    content_image.src = image_url;
    // listen for load event when the new photo is finished loading
    content_image.addEventListener('load', function() {
      // swap out the visible background image with the new fully downloaded photo = 'url(' + image_url + ')';
      // add a class to remove the blur filter to smoothly transition the image change
      card_image.className = card_image.className + ' is-loaded';

You Might Be Interested In:

Leave a Reply