Native image lazy-loading for the web with [loading="lazy"]

Addy Osmani, on an upcoming web feature which is about to land in Chrome 75:

The loading attribute allows a browser to defer loading offscreen images and iframes until users scroll near them. loading supports three values:

• lazy: is a good candidate for lazy loading.
• eager: is not a good candidate for lazy loading. Load right away.
• auto: browser will determine whether or not to lazily load.

Not specifying the attribute at all will have the same impact as setting loading=auto.

You can also feature-detect is using this little snippet:

if ('loading' in HTMLImageElement.prototype) { 
    // Browser supports `loading`..
} else {
   // Fetch and apply a polyfill/JavaScript library for lazy-loading instead.
}

In case the browser does not support it natively, you could load up a script that uses IntersectionObserver to lazyload images.

Native image lazy-loading for the web →