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?

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).