Post
Ask Question

Lazy Loading (2): HTML

In this series of articles, we discuss Lazy Loading and related. There is no Lazy Loading Category on this site; we put the articles in the LINQ category because the behavior of Lazy Loading is based on or related to LINQ.

A - Introduction

This article will discuss Lazy Loading for HTML, and give a demo to demostrate the Lazy Loading that will enable the images to load as the site visitors scroll down the page decreasing the page load time. The content of the article are

  • A - Introduction
  • B - Lazy Loading for HTML
  • C - Demo

B - Lazy Loading for HTML

As a web standard, since 2020, major web browsers have enabled native handling of lazy loading by default [wiki]. This allows lazy loading to be incorporated into a webpage by adding HTML attributes.

The loading attribute support two values, 

  • auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.
  • lazy: Defer loading of the resource until it is required (such as when an image scrolls into view when a user scrolls down);
  • eager: Load the resource immediately, regardless of where it’s located on the page.
<!-- These resources will be loaded immediately -->
<img src="header_image.jpg">
<img src="header_image2.jpg" loading="eager">

<!-- While these resources will be lazy loaded -->
<img src="article_image.jpg" alt="..." loading="lazy"> 
<iframe src="video-player.html" title="..." loading="lazy"></iframe>

C - Demo for HTML Lazy Loading

The code,

<!DOCTYPE html> 
<html lang="en"> 

<head> 
	<meta charset="UTF-8"> 
	<meta name="viewport" content= 
		"width=device-width, initial-scale=1.0"> 

	<title>Lazy Loading Images</title> 
</head> 

<body style="background-color:powderblue;">
	<h1>Lazy Loading Images</h1> 

	<!-- loading attribute of image tag is 
		used to specify lazy loading -->
	<img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171634/1.jpg"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" /> 

	<img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171633/2.jpg"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" /> 

	<img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171632/3.jpg"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" /> 

	<img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171631/4.jpg"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" /> 

	<img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171629/5.jpg"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" /> 

	<img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171628/6.jpg"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" /> 

	<img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171627/7.jpg"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" /> 

	<img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171626/8.jpg"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" /> 

	<img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171625/9.jpg"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" /> 

	<img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171623/10.jpg"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" /> 
		
	<img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171622/11.jpg"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" /> 

	<img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171621/12.jpg"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" /> 

	<img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171620/13.jpg"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" /> 

	<img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171619/14.jpg"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" /> 

	<img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20201109171618/15.jpg"
		alt="numbers" loading="lazy"
		width="300" height="300"
		style="display:block; margin:10px" /> 
</body> 

</html>

Open the HTML page in Google Chrome:

Open the Google Chrome DevTools by rRght-Click the browser => Inspect

In DevTools => Click Network in the top tab => Click img in the element tab

Refresh the page, we can see the first load with the first 7 photos in DevTools:
 
Scroll down to show Photo 4,5,6, then we can see the Photo from 8 to 11 are loaded  in DevTools:
Till viewing the Photo 13, 14, 15, all photos are loaded  in DevTools:
Right Click Waterfall => Waterfull => Total Duration:
Now we can see the Total Duration for the Photos loading:
Finally, this is a Git animation to show the dynamic process when scrolling down:
 
References


Similar Articles