Google Chrome Native lazy-loading

Google Chrome Native lazy-loading

Google Chrome Native lazy-loading

It's finally here! Google Chrome support native lazy loading by adding the loading attribute to an image and an iframe!

More info at https://web.dev/native-lazy-loading

What is lazy-loading?

"Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed. It can contribute to efficiency in the program's operation if properly and appropriately used. The opposite of lazy loading is eager loading." -Wikipedia

Here is a sample code:


The loading attribute in img and iframe elements supports the following 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 reaches a calculated distance from the viewport.
  • eager: Load the resource immediately, regardless of where it’s located on the page.

Post your comment

Emre Rothzerg
Emre Rothzerg

Strategist.
Developer.
Consultant.

Follow me on:
Contact:
[email protected]
Newsletters

I am currently considering
new projects

Contact me