Support the ‘loading’ attribute, which can be used to defer the load of below-the-fold iframes and images on the page until the user scrolls near them. This is to reduce data usage, memory usage, and to speed up above-the-fold content. Web developers can opt-in to lazy load by specifying loading=lazy on <iframe> and <img> elements.

Demos

Documentation

Specification

Editor's draft

Status in Chromium

Blink>Loader


Enabled by default (tracking bug) in:

  • Chrome for desktop release 77
  • Chrome for Android release 77

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • No signal
  • No signal
  • Positive
  • Positive

Owners

Intent to Prototype url

Intent to Prototype thread

Comments

Supported values for the ‘loading’ attribute include: * ‘lazy’ to defer the load until the image or iframe reaches a distance threshold from the viewport. * ‘eager’ to load the resource immediately. * ‘auto’ the default behavior, which is to eagerly load the resource. The distance threshold after which the deferred content will start loading-in depends on factors including the current effective connection type, and whether Lite mode is enabled. The distance is chosen so that the deferred content almost always finishes loading by the time it becomes visible. Note that if the developer doesn't include the ‘loading’ attribute, then the resources will be eagerly loaded as they always have been.

Search tags

lazyload, lazy, load,

Last updated on 2020-12-21