Chrome 中的本机延迟加载

Question

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

1. 

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：您需要使用以下标志启用延迟加载（更多详细信息）+重新启动浏览器才能生效：

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

• Chrome 76+：默认情况下可以使用本机延迟加载（source）。

Answer 2

图像应包含尺寸属性

如此处所述：https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes

虽然没有必要，但希望或期望在图像上指定尺寸属性，因为如果不指定尺寸，可能会发生布局变化。导致意外行为。

浏览器需要知道图像的尺寸，以便在页面上为其保留足够的空间。

Answer 3

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

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

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

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

Answer 4

如果您想删除警告，请尝试添加

加载=“自动”

标签属性