Techumber
Home Blog Work

HTML5 Image loading attribute

Published on May 2, 2019

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>