6

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?

4 Answers 4

3
  • 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).
Sign up to request clarification or add additional context in comments.

Comments

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.

2 Comments

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.
@appel exactly. Same for me and I found out the issue is with overflow. You can check more here (stackoverflow.com/questions/67390705/…). In short, the issue is still there, so need to add dimensions to make it work.
0

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.

Comments

0

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

loading="auto"

attribute to the tag

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.