Lazy Loading With Blurred Image Effect Using Javascript

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

lazy-loading-with-blurred-image-effect

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.

Related Posts

Google-Translate-Dropdown-Customize-With-Country-Flag

Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

Your email address will not be published. Required fields are marked *