👩‍⚕️ 🚢 👩🏻‍🔬 延迟浏览器图像加载（加载属性） 👨🏻‍⚖️ 🐮 🍿

网络上已支持内置的惰性图像和iframe上传！
从Chrome版本76开始，您可以使用新的loading属性来延迟加载资源，而不必为此编写其他代码或使用第三方JavaScript库。让我们看一下细节。

该视频演示了此功能的示例：

为什么要内置延迟加载？

根据HTTPArchive的说法，图像是大多数站点上请求最多的资源类型，通常比其他任何资源消耗更多的带宽。在第90个百分点，网站向台式机和移动设备发送大约4.7 MB的图像。与猫足够的照片。

嵌入式iframe还会消耗大量数据，并且可能会影响页面性能。仅在用户看到非关键图像和iframe时下载非关键图像和iframe可以提高页面加载速度，最大程度减少用户通道带宽上的负载并减少内存使用量。

当前有两种方法可以延迟加载位于屏幕外的图像和帧：

使用Intersection Observer API
使用scroll ， resize或orientationchange 事件处理程序

任何选项都可能允许开发人员启用延迟加载功能，并且许多开发人员都创建了第三方库来提供更易于使用的抽象。如果您支持直接在浏览器中进行延迟加载，则无需第三方库。内置的延迟加载还确保即使客户端禁用了JavaScript，延迟加载的图像和帧也可以继续工作。

加载属性

如今，Chrome浏览器已经下载了具有不同优先级的图像，具体取决于图像相对于设备查看区域的位置。观看区域下方的图像会以较低的优先级上传，但仍会尽快上传。

在Chrome 76中，您可以使用loading属性来永久延迟屏幕外图像和帧的加载，这可以通过滚动来达到：

 <img src="image.png" loading="lazy" alt="…" width="200" height="200"> <iframe src="https://example.com" loading="lazy"></iframe>

支持的属性值loading ：

auto ：浏览器中的默认延迟加载模式设置。与缺少属性相同
lazy ：延迟加载资源，直到到达距视口的估计距离为止
eager ：尽管资源在页面中，但立即加载

此功能将继续更新，直到以稳定版本启动（不早于Chrome 76）。但是，您可以通过在Chrome中激活以下标志来进行尝试：

chrome：//标志/＃enable-lazy-image-loading
chrome：//标志/＃enable-lazy-frame-loading

装载距离阈值

页面上所有不需要滚动的可见图像和框架均作为标准加载。仅当用户滚动到设备查看区域下方的内容时，才会加载这些内容。

加载开始的距离不是固定的，并且取决于几个因素：

要加载的资源类型（图像或框架）
在Android的Chrome浏览器中是否打开了“ 精简模式 ”
有效连接类型

您可以在Chromium源中找到不同类型的有效化合物的默认值。随着Chrome小组改进启发式方法来确定何时开始下载，这些指标甚至在距查看区域一定距离时的加载方式可能会在不久的将来发生变化。

在Chrome 77中，您可以通过降低 DevTools中的连接速度来尝试使用这些不同的阈值。在此期间，您将需要使用chrome://flags/#force-effective-connection-type.覆盖浏览器中的有效连接类型chrome://flags/#force-effective-connection-type. flag chrome://flags/#force-effective-connection-type.

上传图片

加载属性对帧的影响与对图像的影响不同，这取决于帧是否被隐藏（隐藏的帧通常用于分析或通信任务）。 Chrome使用以下条件来确定框架是否隐藏：

框架宽度和高度不超过4像素
display: none或visibility: hidden属性适用
使用负X或Y定位将框显示在屏幕外

如果框架满足以上任何条件，Chrome就会认为它是隐藏的，并且在大多数情况下不会以延迟模式加载。未隐藏的帧仅在落入负载阈值内时才会加载。对于仍在延迟加载模式下加载的框架，将显示一个占位符

常见问题

有计划扩展此功能吗？

我们计划更改默认的浏览器延迟加载模式，以在此模式下自动显示如果在Android版Chrome浏览器中启用了精简模式，则其加载可能会延迟的任何图像和帧。

是否可以更改距延迟加载开始的图像或帧的距离？

这些值是硬编码的，无法通过API进行更改。但是，随着Chrome团队尝试不同的阈值距离和变量，它们可能会在将来发生变化。

通过CSS background属性设置的图像能否获得loading属性？

不可以，目前只能与标签一起使用。

加载属性如何处理范围内但不可见的图像（如轮播）？

在延迟模式下，仅加载与设备查看区域底部相距一定距离的那些图像。无论当前是否可见，查看区域上方的所有图像都将正常加载。

如果我已经使用第三方库或脚本来推迟加载图像或框架怎么办？

加载属性不应影响以延迟方式加载数据的代码，但重要的是要考虑以下几点：

如果处于延迟模式的第三方引导程序在Chrome以普通模式加载图像或帧之前尝试加载图像或帧，也就是说，其距离大于浏览器下载距离阈值，则它们仍会根据正常浏览器行为的规则进行延迟和加载
如果您的第三方Bootloader使用比确定浏览器更短的距离来确定何时加载特定图像或帧，则该行为将与您的Bootloader设置相匹配

继续与load =“ lazy”并行使用第三方库的重要原因之一是为不支持此属性的浏览器提供一个多文件。

其他浏览器是否支持集成的延迟加载？

loading属性可以看作是逐步的改进。支持它的浏览器可以延迟模式上载图像和框架。那些不支持的内容-目前，照常上传图像。从跨浏览器支持的角度来看，Chrome 76和所有基于Chromium 76的浏览器均支持loading属性。在Firefox中实现此功能还有一个开放的bug 。

提出了类似的API，并在IE和Edge中使用了该API，但该API专注于降低下载优先级，而不是完全推迟下载优先级。

与尚不支持内置延迟下载的浏览器怎么办？

创建一个多文件或使用第三方库以延迟模式将图像上载到站点。 loading属性可用于确定浏览器是否支持功能：

 if ('loading' in HTMLImageElement.prototype) { // supported in browser } else { // fetch polyfill/third-party library }

例如， lazysizes是用于延迟加载的流行JavaScript库。您可以定义对loading属性的支持，以仅在不支持loading时loading此库。它的工作方式如下

 <!-- 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" alt="…" loading="lazy" class="lazyload"> <img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload"> <img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload"> <script> if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll('img[loading="lazy"]'); images.forEach(img => { img.src = img.dataset.src; }); } else { // Dynamically import the LazySizes library const script = document.createElement('script'); script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js'; document.body.appendChild(script); } </script>

示范工作。在Firefox或Safari这样的浏览器中尝试一下，以查看后备效果。

lazysizes库还提供了一个内置的加载插件，该插件在可能的情况下使用内置的延迟加载，并在必要时使用该库的功能。

延迟的内联加载如何影响网页上的广告？

与其他任何图像或帧一样，以图像或帧形式呈现的所有广告也将以延迟模式加载。

如果打印网页，如何处理图像？

尽管Chrome 76没有功能，但存在一个开放的问题，在打印页面时会立即加载所有图像和框架。

结论

使用对图像和框架的延迟加载的内置支持可以显着提高网页的性能。

如果您在Chrome中启用此功能后发现任何异常行为，请报告错误。

延迟浏览器图像加载（加载属性）