🛰️ ⚱️ 🧜🏽 使用浏览器工具延迟加载图像 🧗🏽 🚚 💝

该材料的作者（我们今天将要翻译的译本）来自Google的Eddie Osmani说，在Chrome 75中，可能已经出现了对<img>和<iframe> 加载元素的新属性的支持。这意味着这些元素将支持所谓的“延迟加载”数据的标准功能。

如果您渴望找出新属性在代码中的用法，那么请看以下示例：

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

现在，我们将讨论loading属性如何工作。

初步资料

网页通常包含许多图像，这会影响页面的大小，导致其过度增加，并影响页面的加载速度。页面上显示的许多图像不在其可见区域内。为了看到这样的图像，用户需要滚动页面。

从历史上看，为了限制对页面可见区域之外的图像的页面加载时间的影响，程序员必须使用JavaScript库（例如LazySizes ）。这些库使您可以延迟此类图像的加载，直到用户滚动浏览页面的距离不足为止。

页面加载211张图像。 没有用于创建延迟图像加载的页面版本会立即加载10 MB的图形数据。 使用延迟加载（使用LazySizes）的同一页面仅预加载250 Kb的图形信息。 用户在页面上移动时，其他所有内容均已加载。 有关该实验的详细信息，请访问webpagetest.org 。

如果浏览器可以帮助程序员避免加载页面可见区域之外的图像怎么办？这将对在页面的可见区域中加载数据的速度产生有益的影响，将在低功率设备上减少通过网络传输的数据总量，从而减少内存消耗。借助于<img>和<iframe> loading元素的新属性，所有这些很快将成为可能。

加载属性

loading属性允许浏览器延迟加载页面可见区域之外的<img>和<iframe>元素的内容，直到用户滚动页面使其足够接近这些元素为止。此属性支持三个值：

lazy ：指向适合延迟加载的材料。
eager ：必须立即加载具有此属性值的元素中的材料。
auto ：浏览器将决定是否将延迟加载应用于具有此属性值的材料。

如果未指定loading属性的值，则等同于将其设置为auto 。

当前，<img>和<iframe>元素的loading属性在HTML标准下

例子

loading属性适用于<img>元素（包括srcset属性和<picture>元素内部）以及<iframe>元素。

 <!--    ,      ,   ,         --> <img align="center" src="unicorn.jpg" loading="lazy" alt=".."/> <!--    ,    --> <img align="center" src="unicorn.jpg" loading="eager" alt=".."/> <!--   ,        ,   --> <img align="center" src="unicorn.jpg" loading="auto" alt=".."/> <!--      <picture>.      <img>,    <picture>   srcset     --> <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img align="center" src="fallback.jpg" loading="lazy"> </picture> <!--    ,     srcset --> <img align="center" 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"> <!--      <iframe>   ,     ,          --> <iframe src="video-player.html" loading="lazy"></iframe>

应当注意的是，我们在这里使用如下形式：“当用户滚动页面以使其可见区域在元素附近时”。图像开始加载的确切时间由浏览器自行决定。通常，我们可以希望浏览器将开始下载已延迟下载的资料，这需要一段时间才能使包含它们的页面区域对用户可见。这将增加在用户看到相关材料之前完成相关材料的下载和输出的机会。

请注意，我建议将相关属性称为loading ，因为这种命名方法与选择解码属性名称时所使用的命名方法相对应。之前的句子（例如lazyload ）无效，因为此属性必须支持多个值（ lazy ， eager和auto ）。

检查浏览器对加载属性的支持

我们考虑了使用JavaScript库来组织材料的延迟加载的可能性的重要性（对于此功能的跨浏览器支持）。您可以通过以下方式检查浏览器是否支持loading属性：

 <script> if ('loading' in HTMLImageElement.prototype) {   //   `loading`. } else {  //  -      JavaScript-   //    . } </script>

请注意， loading属性可用于逐步扩展页面的功能。支持此属性的浏览器将能够使用loading=lazy来组织材料的延迟下载，而不支持此功能的浏览器将像以前一样简单地下载这些材料。

跨浏览器懒惰图像加载

如果跨浏览器对惰性图像加载的支持很重要，那么仅确定浏览器是否支持此功能还不够，如果不支持，则使用适当的库（如果您使用类似<img align="center" src=unicorn.jpg loading=lazy />来描述标记中的图像） <img align="center" src=unicorn.jpg loading=lazy /> 。

在标记中，您需要使用类似<img data-src=unicorn.jpg /> （而不是src ， srcset或<source> ），以避免不支持new属性的浏览器正常加载图像。为了将此类属性更改为需要在浏览器的loading属性的支持下使用的属性，或者在不支持此属性的情况下下载相应的库，可以使用JavaScript。

这是看起来的例子：

 <!--   ,     ,   --> <img align="center" src="hero.jpg" alt=".."/> <!--    ,     --> <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 () => {   if ('loading' in HTMLImageElement.prototype) {       const images = document.querySelectorAll("img.lazyload");       images.forEach(img => {           img.src = img.dataset.src;       });   } else {       //    LazySizes       const lazySizesLib = await import('/lazysizes.min.js');       //  LazySizes ( data-src & class=lazyload)       lazySizes.init(); // lazySizes    ,   .   } })(); </script>

考虑一下此代码的一些功能：

使用常规<img>标记描述页面加载后立即对用户可见的图像。使用不带src的data-src属性将导致图像在加载页面后不立即显示，因此，设置那些在加载页面后应立即可见的图像，我们必须指定src属性。
当描述加载页面后用户无法立即看到的图像时，我们使用data-src属性。这样做是为了防止它们在不支持loading属性的浏览器中正常loading 。如果浏览器支持此属性，则将data-src更改为src 。
如果不支持loading属性，我们将加载辅助库（lazySizes）并对其进行初始化。在这里，我们使用class=lazyload将LazySizes库指向要使用延迟加载技术处理的图像。

演示版

在这里，您可以看到一个页面示例，在该页面上执行了100张猫的图像的延迟加载。但是，如果感兴趣，请下载此页面的视频。

在Chrome中加载属性支持的实施功能

我们强烈建议在生产环境中使用loading属性之前，请等待其支持出现在稳定的Chrome版本中。如果您渴望尝试这个机会，那么您可能会对我们将要谈论的内容感兴趣。

加载属性测试

为了立即体验新属性，请转到Chrome标志设置页面（ chrome://flags ），启用“ Enable lazy frame loading和“ Enable lazy image loading标志，然后重新启动浏览器。

浏览器设定

在Chrome中延迟加载材料的方法的实现不仅基于页面可见区域与这些材料的接近程度，还基于连接速度。在代码中硬编码了用于触发不同连接速度的惰性加载材料的阈值，但是可以使用命令行来覆盖这些值。这是图像的替代设置的示例：

 canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=5000,lazyImageLoadingDistanceThresholdPxOffline=8000,lazyImageLoadingDistanceThresholdPxSlow2G=8000,lazyImageLoadingDistanceThresholdPx2G=6000,lazyImageLoadingDistanceThresholdPx3G=4000,lazyImageLoadingDistanceThresholdPx4G=3000 'https://mathiasbynens.be/demo/img-loading-lazy'

上面的命令对应于当前的默认设置。如果页面滚动位置距图像400像素，则要开始加载图像，必须将该命令中的所有值更改为400。以下是此命令1像素变化的示例（以上视频中使用了此设置））

 canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=1,lazyImageLoadingDistanceThresholdPxOffline=1,lazyImageLoadingDistanceThresholdPxSlow2G=1,lazyImageLoadingDistanceThresholdPx2G=1,lazyImageLoadingDistanceThresholdPx3G=1,lazyImageLoadingDistanceThresholdPx4G=1 'https://mathiasbynens.be/demo/img-loading-lazy'

随着此功能的实施在未来几周稳定，Chrome中延迟加载的标准配置很有可能会发生变化。

开发人员工具

Chrome中支持loading属性的实现功能是，浏览器在加载页面时，如果它支持范围请求技术，则从服务器请求前2 KB的图像。前2 KB图像可能包含有关其大小的信息。这允许浏览器生成具有对应于图像尺寸的尺寸的占位符。另外，在这2K中，如果我们谈论的是像图标这样的小图像，则很可能包含整个图像。

加载图形文件的片段

当用户接近时，Chrome会下载剩余的图像数据。使用开发人员工具时，这可能导致以下事实：有关两个映像下载的信息可以“出现”在“网络”面板中，而有关执行下载每个映像的两个请求的信息将显示在“资源定时”面板中。

浏览器支持服务器定义加载属性

如果我们生活在一个完美的世界中，那么为了找出是否有必要在特定浏览器中使用辅助库来输出正确的页面，就不必依靠使用客户端JavaScript进行浏览器分析了。通过这种方法，服务器可以预先知道是否需要这样的库，它将在发送到浏览器的页面中包括（或不包括）它。使用HTTP客户端提示技术可以使这种检查成为可能，这使得客户端能够将有关其功能的“提示”传输到服务器。

关于loading属性支持的相应“提示”现在处于考虑的初期。

总结

该材料的作者邀请所有对使用<img>和<iframe>元素感兴趣的使用loading属性的人尝试一下并与他们分享他们的印象。他特别感兴趣的是，从开发人员的角度了解此处提出的用于延迟加载数据的跨浏览器支持机制的外观，以及在谈论此类机制时是否错过了一些临界情况。

亲爱的读者们！ 您打算在项目中使用loading属性吗？

使用浏览器工具延迟加载图像