Lazy Loading images in HTML - GeeksforGeeks

01 Dec, 2020
What is Lazy Loading?
Lazy loading is a strategy to identify resources as non-critical and load these only when needed. It’s a way to optimize web pages, which translates into reduced page load times. To read more about it:  https://www.geeksforgeeks.org/what-is-lazy-loading/
Generally images are larger in size, so lazy loading can be used to defer the offscreen images.
Difference from JavaScript solutions ?
There are many JavaScript solutions to support lazy loading but recently browsers have also started to implement lazy loading of images and iframes. Using browser method is more performance but it is not fully supported right now. 
Approach: To use Lazy Loading, use the loading attribute of image tag in html. Here are the supported values for the loading attribute:
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 reaches a calculated distance from the viewport.
eager: Load the resource immediately, regardless of where it’s located on the page.
Example:
HTML
<!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>    <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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Misc
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript