Chrome 中的原生延迟加载

Question

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

1. 我在 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

我运行你的测试页面，我得到了

[干预] 图像延迟加载并用占位符替换。加载事件被推迟。请参阅https://crbug.com/846170

我在网上找到了一些lazyload的例子，当我打开他们的demo页面时，仍然出现这个提示。

我认为是因为这个属性还存在bug。毕竟，它仍然是一个正在讨论的属性。