HTML5 Image loading attribute

May 02, 2019.1 min read

WARNING: It's available only in Chrome browser (>= 76)

<!-- loading image when it's in viewport -->
<img src="https://via.placeholder.com/150" loading="alzy" />

<!-- load image as soon page loaded -->
<img src="https://via.placeholder.com/150" loading="eager" />

<!-- this is default if you don't pass loading this will be chosen -->
<img src="https://via.placeholder.com/150" loading="auto" />

if ("loading" in HTMLImageElement.prototype) {
  // Browser supports
} else {
  // Browser dosen't support
}

Note: The same attribute can also be applied to <iframe>