Yesterday, Chrome announced that native lazy-loading is no longer behind a flag in Chrome 76. The loading attribute can now be used to defer the loading of offscreen elements (i.e. images and iframes). Currently, the following values can be used:

  • auto: The default behavior of the browser. The same as not including the attribute at all.

  • lazy: Defers the loading of the resource until it reaches a calculated distance from the viewport.

  • eager: Loads the resource immediately, regardless of where it’s located.

Supporting lazy-loading in other browsers

Checking for the loading property allows you to decide how to implement lazy-loading. For browsers that have it, you can use the native implementation. For browsers that don’t, you will still need to load a polyfill or third-party library.

if ('loading' in HTMLImageElement.prototype) {
  // Lazy-loading supported by browser
} else {
  // Fetch a polyfill or third-party library
}

As of now, only Chromium 76-based browsers have this functionality natively. We’ll have to wait and see if (and how soon) other browsers follow suit.

Further Reading

For more information, Google Developers’s article, Native lazy-loading for the web, is a good place to start.