Native image lazy loading

<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

if ('loading' in HTMLImageElement.prototype === true) {
// use the attribute
} else {
// use polyfill
Edit this page
Want to make your own site like this? Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Zander Martineau.