Image lazy loading – How to implement it with Javascript

Image lazy loading is must in modern web development. This might and will affect your website SEO score. And can be easily implemented with a Javascript!


Similar tags

server hosting e-commerce google page speed php bug network domain coding tips web development seo explained wordpress css

More posts

How does the web actually work? It is easier than you think!
24 Apr 2020 4 minutes read 2.1k views

How does the web actually work? It is easier than you think!

Each website is composed of multiple layers. But where are those layers stored and how do they work? It is quite simple once you see it...

Adding a WordPress Post View Count without a plugin
08 May 2020 4 minutes read 4.4k views

Adding a WordPress Post View Count without a plugin

A short tutorial on how to add a simple post view count to any WordPress blog by yourself. It requires minimum time, and has a great effect on your blog!

COVID-19 is a bug on production but the checkout is still working
16 Mar 2020 7 minutes read 2.9k views

COVID-19 is a bug on production but the checkout is still working

With over 130.000 infected, COVID-19 is rapidly becoming a burning theme. So let us discuss how that affects the web industry. Of course, this is one of the least affected industries today since most of the people in it are able to work remotely quite easily. But is it that easy?

Image lazy loading is becoming more and more popular nowadays. In other words, Google has implemented a website speed score into its search result index. Therefore we should optimize our websites! You can find more about it in this article about google page speeed.

Now, what does "lazy load" even mean? To be specific, by "lazy load" I mean loading images AFTER your website page is loaded. It might seem a bit hard to implement, but trust me - it is not hard at all!

Image default load mechanism

Once you write your html code image usually looks something like this:

...
<img src="/images/awesome-image.jpeg" alt="This image rocks!"/>
...

The image is going to load together with your page. And there you might see a problem. Your page will not finish loading until all images in your HTML are loaded into your browser. Imagine having a really long page with many diagrams, but once the page loads visitors will see only the first 1400px of your webpage. And we don't want that! Luckily there is an easy solution to this problem!

Image lazy load mechanism

Now we are going to change things a bit in order to achieve a better speed score. The first thing is to change all image tags to this:

...
<img src="/images/loading.jpg" data-src="/images/awesome-image.jpeg" alt="This image rocks!"/>
...

Why is the image source pointing to another image? It is simple, you need to have one small image that will load together with the page so that the user knows that image will be displayed there later on. That is why you need the "loading" image instead of every image for the initial page load.

Now comes the fun part! Lazy loading the image itself! To implement this, you just need to copy this at the bottom of your page in the script tag and you are done!

window.onload = (event) => {
    var images = document. getElementsByTagName("img");
    for (var i = 0; i < images.length; i++) {
        images[i].setAttribute('src',image.getAttribute('data-src'));
    }
};

Now, let me explain how it actually works! Once the page loads our anonymous function will execute.

var images = document. getElementsByTagName("img");

This line will get all the images from HTML and load them into variable named images.

for (var i = 0; i < images.length; i++) {
    images[i].setAttribute('src',image.getAttribute('data-src'));
}

Now we will loop through all images and set "src" attribute value to "data-src" value which will make our browser load the image.

How to lazy load some images and not the others?

In case that you need to implement lazy load to just a couple of images you can create similar function:

window.onload = (event) => {
    var images = document. getElementsByClassName("lazy-load");
    for (var i = 0; i < images.length; i++) {
        images[i].setAttribute('src',image.getAttribute('data-src'));
    }
};

And in this case, your HTML should look like this:

...
<!-- Image will be loaded after the web page is fully loaded -->
<img class="lazy-load" src="/images/loading.jpg" data-src="/images/awesome-image.jpeg" alt="This image rocks!"/>
<!-- Image will be loaded together with the web page -->
<img src="/images/awesome-image-2.jpeg" alt="Awesome Image"/>
...

Using font icons and CSS transitions instead of loading image

If you want to avoid loading any image on page load, you can easily use font icons in order to show "loading" segment! In this example I will be using bootstrap icons and transitions.

<div class="post-image-holder">
    <div class="text-center pt-4 loader">
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <img class="rimage mb-0 d-none" src="/images/1x1.png" data-src="/images/myimage.jpeg" alt="My Image"/>
</div>

The script will look similar but will now hide an element and show another element.

window.onload = (event) => {
    var images = document.getElementsByClassName("post-image-holder");
    for (var i = 0; i < images.length; i++) {
        var loader = images[i].getElementsByClassName('loader')[0];
        var image = images[i].getElementsByClassName('rimage')[0];
        image.setAttribute('src',image.getAttribute('data-src'));
        image.classList.remove('d-none');
        loader.style.display = 'none';
    }
};

For these purposes, we are loading an image that is 1x1 pixel and we are replacing it with a real image. But before we display our real image, we are showing the loading element. Why are we loading image that is 1x1 px? Some browsers still load all the images (even the once that are not displayed) and we want to avoid loading large images before the entire page is loaded.

Conclusion

In order to achieve a high score on Page Speed Insights, it is mandatory to lazy load images. There are other techniques as well, but personally I find this one to be the easiest!

In case you are interested in reading more, you can always learn how to implement a post view counter in WordPress!