Chrome 原生懒加载功能上线啦 🔥😍🔥

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

资源延迟加载是网页性能调优的重要组成部分，因为如果立即加载屏幕外资源，会给页面增加很多负担。

引言

我在关于图像优化的文章中介绍了许多技巧和窍门，这篇文章是我撰写的网页性能系列文章之一。但是，关于延迟加载，我提到过你有两种选择：

• 使用标签data-src上的属性<img>，并挂钩到scroll、resize或中的任何一个orientationChange，以确定何时将替换data-src为src以进行调用。
• 使用IntersectionObserverAPI 异步观察变化，并在项目位于视口中时进行调用。

好消息是，从Chrome 76 开始，您可以使用loading图像标签的属性来告诉浏览器如何加载图像。

事实上，它简单到你难以置信🤯：

<img src="../path/to/image.jpg" loading="lazy">

我创建了一个演示来向您展示它的工作原理，请仔细查看网络选项卡。

这里有一个包含代码的 CodePen 示例 👇🏽：

。

我刚刚使用下面的 bash 脚本拼凑出了 HTML 🤷🏽‍♂️。

for i in {400..499}; 
> do echo "<img loading='lazy' 
src='https://placedog.net/${i}/${i}' height='${i}' width='${i}' />"; 
> done

关于属性

目前Chrome浏览器对图片的获取优先级不同，不在视口内的图片优先级较低。但无论如何，它们都会尽快被获取。

有了这个新loading属性，你可以完全延迟加载屏幕外的图像（和iframe），直到滚动页面到达它们时才加载：

<img src="../path/to/image.jpg" loading="lazy">
<iframe src="https://placedog.net" loading="lazy"></iframe>

此属性可以使用三个值：

• auto浏览器的默认行为，等同于不包含该属性。
• lazy延迟加载资源，直到资源到达距离视口一定距离的位置。
• eager立即加载资源

我写这篇文章时使用的Chrome版本是 76 76.0.3809.100，但如果您使用的是 76 以下的任何早期版本，您可以使用设置参数启用此功能：

• 图片链接👉🏽chrome://flags/#enable-lazy-image-loading
• 对于 iframe 👉🏽chrome://flags/#enable-lazy-frame-loading

特征检测

如果您今天想使用此属性，可以使用以下代码来检测它，并准备一个 polyfill，例如loading-attribute-polyfill。

if ('loading' in HTMLImageElement.prototype === true) {
  // use the attribute
} else {
  // use polyfill
}

阻止内容重排

由于图片是延迟加载的，如果您没有为图片设置 `<img>`width和height`<img>` 属性，当图片加载完毕并占据其位置时，内容可能会重新排版。为防止这种情况发生，只需在图片标签上设置所需的 `<img>`style和width`<img> height` 属性值即可：

<img src="../path/to/image.jpg" 
loading="lazy" width="200" height="200">

<img src="../path/to/image.jpg" 
loading="lazy" style="height:200px; width:200px;">

iframe 加载中

iframe当与属性一起使用时，也会应用相同的行为loading。但是，有时出于分析目的，iframe 会被隐藏。例如，它们非常小（4px宽度和高度都小于某个值），或者它们应用了 `<div>`display:none或visibility: hidden`<div>` 属性，或者它们只是因为使用了负边距而超出屏幕范围。

在这种情况下，即使使用了该属性，它也不会延迟加载。

有什么猫腻？

loading使用懒加载时，通常需要考虑以下几点。此外，目前该属性还有一些功能无法实现。

做不到

• 由于资源加载阈值已在源代码中硬编码，因此目前无法更改该阈值。
• 目前还不能将其与 CSS 的背景图片一起使用。

捕捉

• 这可能会影响第三方广告，因为它们也会采用延迟加载的方式。
• 打印时会有一些副作用😉，例如延迟加载的资源将不会被打印出来。不过，目前有一个未解决的问题，您可以关注一下。

其他浏览器呢？

目前，只有Chrome浏览器支持此功能。Firefox浏览器存在一个已知 bug，而 Edge 和 IE 浏览器则没有此功能。

祝大家延迟加载愉快，千万别错过精彩内容哦👋🏽。