Chrome 原生图片懒加载属性

Posted 2021-03-30 MIFE前端周刊

在这篇文章中，我们将研究新的load属性，它将原生的<img>和<iframe>延迟加载到web!对于好奇的人来说，下面是它的预览版:

<img src="celebration.jpg" loading="lazy" alt="..." /><iframe src="video-player.html" loading="lazy"></iframe>

我们希望在Chrome 75中提供对加载的支持，并且正在深入研究我们即将发布的特性。在此之前，让我们深入了解加载是如何工作的。

简介

Web页面通常包含大量图像，这将导致数据使用、页面膨胀和页面加载速度。其中许多图片都是屏幕外的，需要用户滚动才能看到。

从历史上看，为了限制屏幕外的图像对页面加载时间的影响，开发人员需要使用javascript库(比如lazysize)来延迟获取这些图像，直到用户在它们附近滚动。

加载211个图像的页面。没有延迟加载的版本可以获取10MB的图像数据。延迟加载版本(使用lazysize)只预先加载250KB——当用户滚动体验时，会获取其他图像。见WPT。

如果浏览器可以避免为您加载这些屏幕外的图像呢?这将有助于更快地加载视图端口中的内容，减少总体网络数据使用，并在低端设备上减少内存使用。好吧，我很高兴与大家分享，这将很快与新的加载属性为图像和iframe。

loading attribute

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

• lazy:是延迟加载的一个很好的候选项。

• eager:不适合延迟加载。马上加载。

• 自动:浏览器将决定是否延迟加载。

完全不指定属性将与设置load =auto具有相同的影响。

例子

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

<!-- Lazy-load an offscreen image when the user scrolls near it --><img src="unicorn.jpg" loading="lazy" alt=".."/>
<!-- Load an image right away instead of lazy-loading --><img src="unicorn.jpg" loading="eager" alt=".."/>
<!-- Browser decides whether or not to lazy-load the image --><img src="unicorn.jpg" loading="auto" alt=".."/>
<!-- Lazy-load images in <picture>. <img> is the one driving image loading so <picture> and srcset fall off of that --><picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" loading="lazy"></picture>
<!-- Lazy-load an image that has srcset specified --><img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A rad wolf" loading="lazy">
<!-- Lazy-load an offscreen iframe when the user scrolls near it --><iframe src="video-player.html" loading="lazy"></iframe>

“当用户在附近滚动时”的确切试探由浏览器决定。一般来说，我们希望浏览器能够在延迟图像和iframe内容进入viewport之前获取它们。这将增加在用户滚动到图像或iframe时完成的加载更改。

注意:我建议将其命名为loading属性，因为它的命名与解码属性更接近。之前的建议，比如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 src=unicorn.jpg loading=lazy />在标记中使用，则仅对功能检测和延迟加载库是不够的。

下面是一个例子。

• 视口内/上方图像是常规<img>标签。data-src会破坏预加载扫描程序，因此我们希望避免它出现在视口中的所有内容。

• 我们对图像使用data-src，以避免在不受支持的浏览器中出现急于加载的情况。如果支持加载，我们将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：在Chrome中的一个实现细节是它在页面加载时获取前2KB的图像。当用户即将看到它时，它将获取图像的其余部分。这可能导致（1）在DevTools网络面板中出现两次（2）资源计时对每个图像有2个请求。

• 客户端提示：如果此检查可以作为HTTP请求标头完成，则可能会感兴趣，而不是等待客户端功能检测完成。客户端提示正在考虑中，尚未成熟。

原文连接：https://addyosmani.com/blog/lazy-loading/