Contents hide 1) Introducing the loading attribute 1.1) The loading attribute 1.2) Examples: 1.3) In Other Browser 2) Browser Settings lazyloading was always a task to implement while making some web application, now itβs going to be much easier to implement because of the Native Lazy Loading Chrome β New Feature Topics Introducing the loading attribute Browser Settings Introducing the loading attribute Google new release announcement i.e. Chrome 76 says you can use the loading attribute to lazy load the images and iframes without the custom lazy-loading code or any other use of the javascript library. With this new feature, itβs very easy to implement the lazy loading on images and iframes just by using its simple attribute. HTML <img src="celebration.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe> Using this attribute we can load image and iframe only when it gets into the viewport. It is mandatory to add height and width attribute to the <img/> and <iframe></iframe> element or specify the style values directly in an inline style. The loading attribute The Loading attribute supports the three different value to defer loading offscreen images and iframes until users scroll near them lazy : Enables the lazy loading to images and iframes. eager : Loads images and iframes rightaway. auto : the browser will determine whether or not to lazily load. HTML <!-- DEFAULT LOADING --> <img src="image.png" loading="default" alt="cute-cat" width="200" height="200"> <iframe src="https://example.com" loading="default"></iframe> <!-- loads the resource with the default browser behaviour --> <!-- EAGER LOADING --> <img src="image.png" loading="eager" alt="cute-cat" width="200" height="200"> <iframe src="https://example.com" loading="eager"></iframe> <!-- loads all resources immediately on page load --> Note: Not specifying the attribute at all will have the same impact as setting loading='auto' . The loading attribute for <img> and <iframe> is being worked on as part of the HTML standard. Examples: The loading attribute works on <img> (including with srcset and inside <picture>) as well as on <iframe>: HTML <!-- Lazy-load images in <picture>. <img> is the one driving image loading so <picture> and srcset fall off of that --> <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hq.jpg 2x"> <source srcset="small.jpg 1x, small-hq.jpg 2x"> <img src="default.jpg" loading="lazy"> </picture> <!-- Lazy-load an image that has srcset specified --> <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A red Rose" loading="lazy"> In Other Browser We should keep in mind the importance of cross-browser support. Support for loading can be feature-detected as follows: JavaScript (async () => { if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll("img.lazyload"); images.forEach(img => { img.src = img.dataset.src; }); } else { // Dynamically import the LazySizes library const lazySizesLib = await import('/lazysizes.min.js'); // Initiate LazySizes (reads data-src & class=lazyload) lazySizes.init(); // lazySizes works off a global. } })(); Browser Settings however, the lazy load feature is not released a stable version, but we can start testing enabling the flag in chrome browser: For image lazy-loading:<#enable-lazy-image-loading For iframe lazy-loading:#enable-lazy-frame-loading Simply go to chrome://flags/ and search the above flags and enable them Flag Settings A loading=lazy demo featuring exactly 100 kitten pics is available. Check it out! Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: chrome, chrome76, features, lazy loading, native lazt loading