Lazy Load Images is a small script to load images incrementally with a blur effect. The script will display your low-resolution image with a gradual blur until the high-resolution image is fully loaded.

Must Read: Blur Desaturate The Background Image For Your Header | Scroll-Hero-Plugin

How to make use of it:

1. Add low-resolution and high-resolution images to the webpage as follows:

<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>

2. CSS Styles Required for the Lazy Loading Image 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;
}

3. 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';
    });
    
  });
  
}

See Demo And Download

Official Website(derekmorash): Click Here

This superior jQuery/javascript plugin is developed by derekmorash. For extra advanced usage, please go to the official website.