Lazy Loading Fade Effect

A lazy loader doesn't feel elegant at all unless it is given some sub features like a loading icon. This notion was dealt with in the previous Loading Icons chapter where we gave different types of icons to our .lazy container uptil the the point the underlying image loaded.

But is an icon the only thing that can make our loader look nice? Is there anything else we can do in addition? That anything is to give a fade-in effect to our image as it loads into view.

The idea is that instead of showing the image instantly as it loads we transitionally fade it in. Giving a fade-in effect in CSS is extremely simple — just the matter of three properties: opacity, visibility and transition.

We'll start by constructing a class .lazy_img--loading to be given to the lazy image .lazy_img.

Note that we're following the BEM naming convention in the class name lazy_img--loading. As the name might imply, the class lazy_img--loading implies that the underlying lazy image is currently loading.

This class serves to hold the initial state of our transition i.e an opacity of 0 and a hidden visibility.

Consider the following CSS:

.lazy_img--unloaded {
    opacity: 0;
    visibility: hidden;
}

Now let's give .lazy_img a transition property to smoothly transition between its initial and final states.

.lazy_img {
    -webkit-transition: 0.5s linear;
    transition: 0.5s linear;
}

For the JavaScript, we just need to add the class .lazy_img--loading to the lazy image the moment it's fetched into lazyImage; and then remove it, once it successfully gets loaded.

Below shown is the first part of adding the class:

var lazyImage = document.getElementsByClassName("lazy_img")[0];
var offset = lazyImage.getBoundingClientRect().top + window.pageYOffset - window.innerHeight;

lazyImage.classList.add("lazy_img--loading"); // add the class

And following is the second part of removing the class once the image gets loaded:

function loadImage(img) {
    img.onload = function() {
        icon.style.display = "none"; // hide the icon
        this.classList.remove("lazy_img--unloaded"); // show the image
    }

    img.src = img.getAttribute("data-src");
}

This marks the completion of the fade effect. Check it out below and witness the pure elegance of our lazy loader!

Fade Effect Loader