Progressive Image lazy Loading With Blur Effect

Preview:

Description:

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(https://unsplash.it/100/100?image=758);" data-image-full="https://unsplash.it/500/500?image=758">
  <img src="https://unsplash.it/100/100?image=758" alt="Eli DeFaria" />
</a>

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 */
}

.card-image.is-loaded {
  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
      card_image.style.backgroundImage = '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';
    });
    
  });
  
}