Chrome 中的本机延迟加载

Posted 2023-03-05

【中文标题】Chrome 中的本机延迟加载

【英文标题】：Native lazy-load in Chrome

【发布时间】：2019-10-28 20:28:27

【问题描述】：

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

My network info in DevTools

用户代理：Chrome/75.0.3770.80

在 chrome://flags

中启用延迟图像加载

我的测试页面：

<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" > -->
<img src="images/article/photo.jpg" loading="lazy" >


<script>
    if ('loading' in HTMLImageElement.prototype) 
        console.log('YES');
     else 
        console.log('NO');
    
</script>

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

【参考方案1】：

图片应包含尺寸属性

这里提到：https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes

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

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

【讨论】：

有趣的是，虽然他们提到延迟加载不需要图像尺寸才能工作，但在我的 Chrome 版本（87.0.4280.88（官方构建）（64 位）中似乎不是这种情况） .我可能会忽略一些东西，但对于我的生活，我无法让延迟加载工作，除非我特别指定图像高度。

@appel 完全正确。我也一样，我发现问题出在溢出上。您可以在此处查看更多信息 (***.com/questions/67390705/…)。简而言之，问题仍然存在，因此需要添加维度才能使其正常工作。

【参考方案2】：

Chrome 75：您需要使用以下标志 (more details) 启用延迟加载 + 重新启动浏览器以使其生效：

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

Chrome 76+：原生延迟加载默认可用 (source)。

【参考方案3】：

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

[干预] 图像延迟加载并替换为占位符。加载事件被延迟。见https://crbug.com/846170

我在网上找了一些lazyload的例子，打开他们的demo页面，还是出现这个提示。

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