网站图片延迟加载技术应用

在这篇文章中，我们将看看为网络loading带来原生<img>和<iframe>懒惰加载的新属性。对于好奇的人来说，这里有一个实际的预览：

我们希望能够loading在Chrome 75中提供支持，并正在深入研究我们即将发布的功能。在那之前，让我们深入了解它的loading工作原理。

介绍

网页通常包含大量图像，这些图像会导致数据使用，页面膨胀以及页面加载的速度。许多这些图像都在屏幕外，需要用户滚动才能查看它们。

从历史上看，为了限制屏幕外图像对页面加载时间的影响，开发人员需要使用JavaScript库（如LazySizes）来推迟获取这些图像，直到用户滚动它们为止。

页面加载211图像。没有延迟加载的版本可以获取10MB的图像数据。延迟加载版本（使用LazySizes）预先加载250KB – 当用户滚动体验时，将获取其他图像。见WPT。

如果浏览器可以避免为您加载这些屏幕外图像怎么办？这将有助于更快地加载视图端口中的内容，减少整体网络数据使用和低端设备，减少内存使用。嗯，我很高兴地分享，很快就可以使用loading图片和iframe 的新属性。

该loading属性

该loading属性允许浏览器推迟加载屏幕外图像和iframe，直到用户在它们附近滚动。loading支持三个值：

• lazy：是一个很好的懒人加载候选人。
• eager：不适合延迟加载。马上加载。
• auto：浏览器将确定是否延迟加载。

根本不指定属性将产生与设置相同的影响loading=auto。

例子

该loading属性适用于<img>（包括with srcset和inside <picture>）以及on <iframe>：

“当用户滚动到附近时”的确切启发式方法留给浏览器。一般来说，我们希望浏览器在进入视口之前会开始提取延迟图像和iframe内容。这将增加图像或iframe在用户滚动到它们时完成加载的更改。

注意：我建议我们将该loading属性命名为，因为它的命名与decoding属性更接近。之前的提议，例如lazyload属性没有成功，因为我们需要支持多个值（lazy，eager和auto）。

特征检测

我们一直在考虑能够为延迟加载提取和应用JavaScript库的重要性（对于跨浏览器支持）。支持loading功能可以如下检测：

<script>
if ('loading' in HTMLImageElement.prototype) { 
    // Browser supports `loading`..
} else {
   // Fetch and apply a polyfill/JavaScript library
   // for lazy-loading instead.
}
</script>

注意：您还可以使用loading渐进增强功能。支持该属性的浏览器可以获得新的延迟加载行为，loading=lazy而不支持该属性的浏览器仍然会加载图像。

跨浏览器图像延迟加载

如果对延迟加载图像的跨浏览器支持很重要，那么如果您<img src=unicorn.jpg loading=lazy />在标记中使用，则仅对功能检测和延迟加载库是不够的。

该标记需要使用类似<img data-src=unicorn.jpg />（而不是src，srcset或<source>），以避免触发浏览器中的贪婪加载不支持新的属性。如果loading支持，可以使用JavaScript将这些属性更改为正确的属性，否则加载库。

下面是一个这样的例子。

• 视口内/上方图像是常规<img>标签。A data-src会破坏预加载扫描程序，因此我们希望避免它出现在视口中的所有内容。
• 我们data-src在图像上使用以避免在不受支持的浏览器中产生急切的负载。如果loading支持，我们换data-src了src。
• 如果loading不受支持，我们加载一个后备（LazySizes）并启动它。在这里，我们使用class=lazyload一种方式向LazySizes图像指示我们想要延迟加载。

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt=".."/>

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/>
<img data-src="cats.jpg" loading="lazy" alt=".." class="lazyload"/>
<img data-src="dogs.jpg" loading="lazy" alt=".." class="lazyload"/>

<script>
(async () => {
    const images = document.querySelectorAll("img.lazyload");
    if ('loading' in HTMLImageElement.prototype) {
        images.forEach(img => {
            img.src = img.dataset.src;
        });
    } else {
        // Dynamically import the LazySizes library
        const lazySizesLib = await import('/lazysizes.min.js');
        // Initiate LazySizes (reads data-src & class=lazyload)
        lazySizes.init(); // lazySizes works off a global.
    }
})();
</script>

额外的笔记

• 立即尝试：转到chrome：// flags并打开“启用延迟帧加载”和“启用延迟图像加载”标志，然后重新启动Chrome。我们正在更新从旧属性名称的实施load，以loading在未来数周。
• DevTools：loadingChrome中的一个实现细节是它在页面加载时获取前2KB的图像。当用户即将看到它时，它将获取图像的其余部分。这可能导致（1）在DevTools网络面板中“出现”双重提取和（2）资源计时对每个图像有2个请求。
• 客户端提示：如果此检查可以作为HTTP请求标头完成，则可能会感兴趣，而不是等待客户端功能检测完成。客户提示传达loading偏好正在考虑中，但尚未成为“事物”。

包起来

给<img loading>旋，让我们知道您的想法。我对人们如何找到跨浏览器的故事以及是否有任何我们错过的边缘情况特别感兴趣。