Native lazy-load in Chrome

Question

In June Chrome added support of the loading attribute, but it does not work for me. Image is loading when it's not in viewport.

1. My network info in DevTools

2. User-agent: Chrome/75.0.3770.80

3. Enabled lazy image loading in chrome://flags

4. My test page:

   <p style="margin-bottom: 1000px;">Please scroll down. The image is below the viewport.</p>
   <p style="margin-bottom: 1000px;">Way to go&hellip;</p>
   
   <h4>Lazy cat loaded lazily</h4>
   <p>If your browser supports native lazy-loading, it loads the first 2 kB of the image in order to display a
       placeholder. Then, it loads the full-size image.</p>
   <p>If your browser does not support native lazy-loading, it loads the lazysizes library and sets the
       <code>img</code>'s <code>src</code> to a low-quality image placeholder, which is also around 2 kB in size. Then,
       it loads the full-size image.</p>
   <div class="alert alert-warning">The native lazy-loading's 2 kB range request do not work from within Codepen.
       However, you can make this work by copying this to an empty HTML file on your computer.</div>
   <!-- <img src="https://demo.tiny.pictures/native-lazy-loading/lazy-cat.jpg?width=500"
       loading="lazy" alt="Lazy cat loaded lazily"> -->
   <img src="images/article/photo.jpg" loading="lazy" alt="Lazy turtle">
   
   
   <script>
       if ('loading' in HTMLImageElement.prototype) {
           console.log('YES');
       } else {
           console.log('NO');
       }
   </script>
   

Can you tell me, am i doing something wrong or this attribute is raw and not working?

Menander

Answer 1

• Chrome 75: you'll need to enable lazy loading with the following flags (more details) + relaunch the browser for them to take effect:

chrome://flags/#enable-lazy-image-loading
chrome://flags/#enable-lazy-frame-loading

• Chrome 76+: native lazy loading is available by default (source).

Peroneus

Answer 2

Images should include dimension attributes

As mentioned here: https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes

While it's not necessary, it is desired or expected to specify the dimension attributes on your images because without dimensions specified, layout shifts can occur. Resulting in unexpected behavior.

The browser needs to know the dimensions of your images to reserve sufficient space on a page for them.

Lorislorita

Interestingly, while they mention that image dimensions are not required for lazyloading to work, it appears this is not the case in my version of Chrome (87.0.4280.88 (Official Build) (64-bit)). I may be overlooking something but for the life of me I cannot get lazy loading to work, unless I specifically specify image height. – Decurion

@Decurion exactly. Same for me and I found out the issue is with overflow. You can check more here (#67391205). In short, the issue is still there, so need to add dimensions to make it work. – Skate

Answer 3

I run your test page, and i get

[Intervention] Images loaded lazily and replaced with placeholders. Load events are deferred. See https://crbug.com/846170

I found some examples of lazyload on the Internet, and when I opened their demo page, this prompt still appeared.

I think it's because there's still a bug in this attribute. After all, it's still a attribute under discussion.

Guide

Answer 4

If you want to delete the warning, try to add the

loading="auto"

attribute to the tag

Maher