Techumber

HTML5 Image loading attribute

Github avatar
Dimpu
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>


...