javascript - Chrome 中的原生延迟加载

Question

6 月，Chrome 添加了对loading 属性 的支持，但它对我不起作用。图像不在视口(viewport)中时正在加载。

1. My network info in DevTools

2. 用户代理:Chrome/75.0.3770.80

3. 在 chrome://flags

   中启用延迟图像加载

4. 我的测试页:

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

你能告诉我，我做错了什么或者这个属性是原始的并且不起作用吗？

Answer 1

• Chrome 75:您需要使用以下标志 ( more details ) 启用延迟加载 + 重新启动浏览器才能使它们生效:

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

• Chrome 76+: native 延迟加载默认可用 (source)。