Native image lazy loading | Zander's Code Notes

👋 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
}