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 cssMore posts
-thumb-large.webp)
3 things that you need to know before you decide to get into coding as a profession
Many people are getting a wrong impression when it comes to this segment as a profession . I need to admit that it really does look quite easy when you are an observer!But have you actually thought about what you really need to become a developer ? Any kind of developer - it doesn't matter if it is a web developer, app developer or any other! Well here is a list of things that you need to know before you get into coding as a career choice!

Playing with Magento, getting started and some of its features!
Getting started with Magento can be daunting . That is why many people get easily discouraged, but they shouldn't be. At the end of the day, it is just a system like any other! Here is one part of my experience. Here we will talk about a couple of pros and cons when it comes to this system.
-thumb-large.webp)
How to become a web developer – a beginners guide
Lately, many people are deciding to change their professions and become developers. And I understand them. But getting started can be quite daunting! That is why I have decided to write a small guide on how to become a developer.
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!