Best Ways to Customize Your Own Lazy Loading for Websites

Lazy Loading is used to defer the loading of some images or web page elements for later when a user visits a web page. This is usually done for images and website elements below the fold. The idea is that rather than loading the entire web page in one go, you load some parts of the web page as the user keeps scrolling down.

The primary benefit of using lazy Loading is that it decreases the loading time of the overall website. Lazy Loading improves the performance of the website and provides better user experience by loading the top part first which visitors can immediately start watching or reading. When visitors come to your web page and have to wait for long, they lose their interest and may go away. However, if you give them something to watch or read instantly while you load rest of the web page, you can keep them hooked to your website. The second advantage of lazy Loading is cost reduction. Images are only downloaded if the website visitor visits that particular section of the website. Hence, if the visitor does not scroll down, less data is downloaded on their device, saving them money.

Due to these advantages, lazy Loading is an excellent way to improve your website’s user experience and efficiency.

You can customize lazy Loading for your website in two ways – using CSS background property or using <img> tag. However, the <img> tag method is more common of the two as this technique is easy to use.

<img> tag property:

Best Way to Customize Your Own Lazy Loading for the Website - Image Tag

When the <img> tag is used, the browser uses the src attribute to trigger the image load. It doesn’t matter if it is the 1st image or the 100th image in your code. If the browser receives the src attribute, it will trigger the image load. So to lazyload these images, add the image URL to an attribute other than src. For example, if you place the image URL in the data-src attribute, the browser does not trigger the image load as the src attribute is empty.

Now that the upfront load has stopped we need to tell the browser when the image should be loaded. We want to trigger the loading of the image as soon as it enters the viewport. There are two ways to check the timing of an image entering the viewport:

1. Using JavaScript events:

Best Way to Customize Your Own Lazy Loading for the Website - Javascript

In this technique, event listeners are used on resizing, orientation change, and scroll events in the browser. The scroll event is the most obvious one. It is used to check when the user scrolls the web page. The ‘orientationChange’ and ‘resize’ events are equally essential for lazy Loading. The resize event gets triggered when there are changes in the size of the browser window. The ‘orientationChange’ event occurs when the device is rotated from portrait to landscape mode or vice versa. In these cases, the number of images that are visible on the screen will change, and so we will need to trigger the image load.

When one of these events occurs, we look for all the images present on the page that haven’t been loaded yet. By checking all the unloaded image present on the web page that is now in the viewport, we find out the ones that need to be loaded instantly. This is done using the current document scroll top, window height, and image’s top offset.

If an image has entered the viewport, we take the image URL from the data-src attribute and place it in the src attribute which triggers the image load. Then we have to remove class lazy from the image as this class makes images load lazily. When all the images are loaded, the event listeners are removed.

In the case of scroll, the scroll event triggers continuously. So for increasing the performance, we can add a small timeout that will throttle the lazy loading execution.

2. Using intersection observer API:

Best Way to Customize Your Own Lazy Loading for the Website - Intersection Observer

Intersection Observer API is a comparatively new API in browsers. This technique makes it very simple to detect the timing of an element entering the viewport. This technique delivers excellent performance without using complex Maths as compared to the previous method.

First, we have to attach the observer to all the images that require lazy Loading. When API detects an image has entered the viewport, it picks the URL from the data-src and puts it into the src attribute using the ‘isIntersecting’ method to trigger the image load. After that, the lazy class is removed along with removing the observer.

The Intersection Observer API works quickly without making the site appear sluggish on scrolling compared to using JavaScript events. With the event listener technique, we had to add a timeout that adds a slight delay. However, Intersection Observer API is not supported by all browsers. Hence, event listener has become a popular choice for the users.

CSS background property:

Best Way to Customize Your Own Lazy Loading for the Website - CSS Background

For loading CSS background images, the browser has to build CSS Object Model (CSSOM) along with Document Object Model (DOM) to decide whether the CSS style will apply to a DOM present in the existing document. If the CSS rule does not apply to the element, the browser will not load the background image.

With this technique, we apply background-image CSS property when an element comes to the viewport. There is an element with ID bg-image (background image) in CSS. Once the class lazy is added to the image, in the CSS technique, we override the bg-image property and make it none.

Adding .lazy class to the #bg-image is preferred in CSS than using #bg-image alone. Initially, the browser applies background-image: none to the element. Once we scroll through the webpage, the event listeners or the Intersection Observer detects the image present in the viewport and deletes the .lazy class. This is not applicable in the CSS technique as the bg-image property is applied to the element triggering the background image load.

So, here are the two ways you can customize your own lazy loading website. Both of these techniques deliver exceptional results. However, if you want a straightforward technique, you should go for the <img> tag. There are a lot of plugins available for WordPress users to customize lazy loading images on their WordPress websites as well. Optimizing images for your WordPress website using these plugins, along with lazy loading will improve your website’s performance, provide a great better experience and help with SEO as well.

The post Best Ways to Customize Your Own Lazy Loading for Websites appeared first on Web Design Blog | Magazine for Designers.