Native lazy-load in Chrome

Viewed 6817

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?

3 Answers
  • 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).

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.

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.

Related