Author: | derekmorash |
---|---|
Views Total: | 12,060 views |
Official Page: | Go to website |
Last Update: | June 3, 2017 |
License: | MIT |
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'; }); }); }