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.
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.