Lazily load iframes and images via ‘loading’ attribute

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.

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.

Demos

Documentation

Specification

Editor's draft

Status in Chromium

Blink>Loader


Enabled by default (tracking bug) in:

  • Chrome for desktop release 76
  • Chrome for Android release 76

Consensus & Standardization

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

  • No public signals
  • No public signals
  • Public support
  • Positive

Owners

Intent to Implement url

Intent to Implement thread

Last updated on 2019-08-07