Images are an almost indispensable component in today’s websites as it can be banners, product images, logos … to make the website more vivid and easy to see. But sadly it is one of the largest sized things on the web, making up a significant portion of the user’s downloads. Imagine that you go to an e-commerce website, in which there are dozens of pictures describing the product and you have to wait for the browser to download each picture, that’s terrible, isn’t it?
In this article, I will briefly talk about Lazy loading technique, which makes loading the website’s content more flexible and efficient by loading each part instead of loading the entire content of the website.
Lazy loading
Lazy loading is a technique of only loading the content being used by the user instead of loading the entire web page. Lazy loading is used for the purpose of increasing performance and making the user experience better.
Why need Lazy loading?
Increase user experience
Imagine that you have a website with dozens of products, each containing 2 to 3 pictures of descriptions. If the user visits the website for the first time, they will have to download all of them to the computer, but the size of the images is not small, leading to a longer time to load the web page. What caught his eye was the series of icons that were spinning like … It was really annoying because no one likes to wait, after so many times he decided not to return to the site. that too. As for lazy loading, network traffic will be prioritized to load the necessary resources, what is displayed on the screen, where the user scrolls the resource will be loaded there.
Avoid wasting data
The content of the web page is not always viewed by users, so pulling all the data is not necessary, especially for the connection types with limited traffic.
Avoid wasting resources and processing time
Avoiding unused data helps to save CPU resources, memory, traffic … for the user side as well as reduce the load on the service provider side.
Intersection Observer
Intersection Observer is an API that helps you determine which areas of the web page are displayed on the user’s screen so that suitable processing can be taken. Intersection Observer is quite simple and easy to use, highly efficient, but with a small caveat that some older browsers do not support it as it has only recently appeared. Only two kids, IE and Opera Mini, are not playing with this guy, you can refer here .
Because it can determine which area is displayed to the user, it can be used to lazy loading images quite effectively, in addition it is also used to make infinite scrolling, or to calculate the visibility of advertisement…
Lazy loading images with Intersection Observer
Usually an image will be downloaded via the <img> or background, background-image... properties. Consider the case of the img first.
In the <img> the path of the image is declared through the src attribute. If that property contains data, the browser will automatically make a request to download the content of the photo without knowing where it is located, whether it has been displayed on the user’s screen or not, just knowing. If there is src then download it only. So to save the path of the image to be lazy loading, we can use the data-src attribute and the browser will ignore and no longer download the image.
An IntersectionObserver object would look like this:
1 2 | const observer = new IntersectionObserver(callback, options) |
IntersectionObserver takes two parameters, callback and options . I will talk about options , it is a parameter passed in the form of an object allowing to customize a few configurations to make use more flexible. Options consists of 3 main properties:
1 2 3 4 5 6 | const options = { root: null, rootMargin: '0px', threshold: 0, } |
- root : the element’s parent to be lazy loading and scrollable, used to determine if the target element is currently in it. Usually the
rootwill be the part of the web page that is displayed on the user’s screen (viewport). To declare viewport as root, we set the value to null and that is also the default value. In the image under the blue area is theroot, the orange part is the target element, in this article will be the image that needs to be applied lazy loading.
- rootMargin : you can understand it as the margin of the
rootelement mentioned above, usage is the same as the margin property in CSS, which can contain one or more parameters passed depending on usage. It increases or decreasesroot‘s limit, which in turn makes usage more flexible. Its default value is 0px.
- threshold : This property indicates the percentage of the target object’s visibility, if exceeding that number the
callbackfunction will be executed. By default, this value is 0, which means that if only 1 pixel of the target object is displayed on the user’s viewport, thecallbackwill be executed immediately.
To apply lazy loading to the image in the img , we save the path to the image via the data-src attribute and in the callback, we will reset the image’s src attribute value to data-src . The browser will then download the image immediately.
1 2 3 4 5 6 7 8 9 10 11 12 13 | let observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if(entry.isIntersecting){ entry.target.src = entry.target.dataset.src; observer.unobserve(entry.target); } }); }, { threshold: 0.7 }); document.querySelectorAll('img').forEach(img => { observer.observe(img) }); |
In addition to the img tag, the image is also downloaded through the background . To apply lazy loading to the background property, we will have to use some tips in CSS.
For example, we have a div with class content and in that content class there is a full declaration of background-image properties. To prevent the browser from downloading the background image part image, we add a lazy-background class after the content class. The lazy-background class will declare the background-image as none or the path of the placeholder image, overwriting the value in the other content class. And when you need to load the background, you just need to remove the lazy-background class, the background will be returned to its original value and the image will be downloaded.
1 2 3 4 5 6 7 8 9 10 11 12 13 | let observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if(entry.isIntersecting){ entry.target.classList.remove("lazy-background"); observer.unobserve(entry.target); } }); }, { threshold: 0.7 }); document.querySelectorAll('div').forEach(div => { observer.observe(div) }); |
Image placeholder
To improve the user experience slightly, while waiting for the main image to download, we should temporarily replace it with a placeholder image. Usually the best practice is to replace everything with an image that looks like this or use an image with the same background color instead.
It’s the easiest and easiest way to do it, but to enhance the user experience, you can replace it with the main color of the image being downloaded. This avoids sudden color changes when the image is completely loaded, and also avoids the tediousness of having too many identical placeholder photos. To do that you can refer to a library of manu.ninja .
It is a better idea to use a photo that is many times lower than the original image as a placeholder. Note that this is a low quality image so the size will be much smaller than the original image, possibly only 1/10, 1/15 .. the size of the original image and usually it will be used with the function infinite scrolling so overall it only has a small effect on the performance and greatly increases the user experience, well worth the tradeoff.
Refer
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
https://blog.arnellebalane.com/the-intersection-observer-api-d441be0b088d