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.