🖼 Native image lazy loading

👋 FYI, this note is over 6 months old. Some of the content may be out of date.
On this page
<img src="../path/to/image.jpg" loading="lazy" />

You can use three values with this attribute:

  • auto: Default behaviour of the browser, equal to not including the attribute.
  • lazy: Defer loading of resources until it reaches a calculated distance from viewport.
  • eager: Load the resource immediately

Feature detection Jump to heading

if ('loading' in HTMLImageElement.prototype === true) {
// use the attribute
} else {
// use polyfill
}

← Back home