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
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.
<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.
<!-- 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 -->
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>
:
<!-- 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:
(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
A loading=lazy
demo featuring exactly 100 kitten pics is available. Check it out!