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

Written by Bram.us - - Aggregated on Monday April 8, 2019
Tags: elsewhere, images, lazyload, link, webdev

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 →


« Creating an Extension Pack for Visual … - Scotch.io

The New Aesthetic - eye-cam:Not CGI: drone footage of drift … »