浏览器级图片延迟加载，适用于网络

使用合集保持井井有条 根据您的偏好保存内容并对其进行分类。

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

您可以使用 loading 属性来延迟加载图片，而无需编写自定义延迟加载代码或使用单独的 JavaScript 库。这是一个关于此功能的演示

此页面详细介绍了在浏览器中实现延迟加载的步骤。

为什么使用浏览器级延迟加载？

根据 HTTP Archive 的数据，图片是大多数网站请求最多的资源类型，并且它们通常比任何其他资源占用更多的带宽。在第 90 个百分位数，站点在桌面设备和移动设备上发送超过 5 MB 的图片。

以前，有两种方法可以延迟加载屏幕外图片

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

这两种方法都允许开发者包含延迟加载行为，许多开发者已经构建了第三方库来提供更易于使用的抽象。

但是，由于浏览器直接支持延迟加载，因此无需外部库。浏览器级延迟加载还确保即使客户端禁用 JavaScript，图片的加载仍然有效。但请注意，仅当启用 JavaScript 时，加载才会延迟。

loading 属性

Chrome 会根据图片相对于设备视口的位置，以不同的优先级加载图片。视口下方的图片以较低的优先级加载，但它们仍然会在页面加载时被获取。

您可以使用 loading 属性来完全延迟加载屏幕外图片

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

以下是 loading 属性的受支持值

• lazy：延迟加载资源，直到它到达视口的计算距离。
• eager：浏览器的默认加载行为，与不包含该属性相同，意味着无论图片位于页面上的哪个位置，都会加载该图片。这是默认设置，但如果您使用的工具在没有显式值时自动添加 loading="lazy"，或者您的代码检查工具在未显式设置时报错，则显式设置此值可能很有用。

loading 属性和提取优先级之间的关系

eager 值是指示像往常一样加载图片的指令，如果图片在屏幕外，则不会进一步延迟加载。它不会比没有 loading 属性的其他图片加载得更快。

如果您想提高重要图片（例如，LCP 图片）的提取优先级，请使用 提取优先级 和 fetchpriority="high"。

具有 loading="lazy" 和 fetchpriority="high" 的图片在屏幕外时仍会延迟加载，然后在几乎位于视口内时以高优先级提取。这种组合实际上没有必要，因为浏览器无论如何都可能以高优先级加载该图片。

视口距离阈值

所有无需滚动即可立即查看的图片都会正常加载。设备视口下方很远的图片仅在用户滚动到附近时才会被提取。

Chromium 的延迟加载实现尝试确保屏幕外图片加载得足够早，以便在用户滚动到它们时完成加载，方法是在它们在视口中可见之前很久就获取它们。

距离阈值因以下因素而异

• 正在提取的图片资源类型
• 有效连接类型

您可以在Chromium 源代码中找到不同有效连接类型的默认值。您可以通过在 DevTools 中限制网络速度来试验这些不同的阈值。

改进的数据节省和视口距离阈值

在 2020 年 7 月，Chrome 进行了重大改进，以调整图片延迟加载的视口距离阈值，从而更好地满足开发者的期望。

在快速连接 (4G) 上，我们将 Chrome 的视口距离阈值从 3000px 降低到 1250px，在较慢的连接（3G 或更低）上，将阈值从 4000px 更改为 2500px。此更改实现了两件事

• <img loading=lazy> 的行为更接近 JavaScript 延迟加载库提供的体验。
• 新的视口距离阈值仍然意味着图片可能会在用户滚动到它们时加载完毕。

您可以在下面找到快速连接 (4G) 上我们的一个演示的旧视口距离阈值与新视口距离阈值之间的比较

以及新阈值与 LazySizes（一个流行的 JavaScript 延迟加载库）的比较

为您的图片提供尺寸属性

当浏览器加载图片时，除非明确指定，否则它不会立即知道图片的尺寸。为了让浏览器在页面上为图片保留足够的空间，并避免破坏性的布局偏移，我们建议向所有 <img> 标记添加 width 和 height 属性。

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

或者，直接在内联样式中指定它们的值

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

设置尺寸的最佳实践适用于 <img> 标记，无论您是否延迟加载它们，但延迟加载会使其更重要。

Chromium 中的延迟加载以一种方式实现，使图片更有可能在可见时立即加载，但仍然有可能它们不会在正确的时间加载。如果发生这种情况，不在图片上指定 width 和 height 会增加它们对累积布局偏移的影响。如果您无法指定图片的尺寸，延迟加载它们可以节省网络资源，但会冒着这些增加的布局偏移的风险。

在大多数情况下，如果您不指定尺寸，图片仍然会延迟加载，但您应该注意一些边缘情况。在未指定 width 和 height 的情况下，图片尺寸默认为 0×0 像素。如果您有一个图片库，浏览器可能会认为所有图片都适合在开始时放入视口中，因为每张图片都不占用空间，也没有图片被推出屏幕外。在这种情况下，浏览器决定加载所有内容，从而使页面加载速度变慢。

有关 loading 如何处理大量图片的示例，请参阅此演示。

您还可以延迟加载使用 <picture> 元素定义的图片

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

尽管浏览器决定从任何 <source> 元素加载哪个图片，但您只需要将 loading 添加到后备 <img> 元素。

始终预加载第一个视口中可见的图片

对于用户首次加载页面时可见的图片，尤其是对于 LCP 图片，请使用浏览器的默认预加载，以便它们可以立即可用。有关更多信息，请参阅过度延迟加载的性能影响。

仅对初始视口外部的图片使用 loading=lazy。浏览器在知道图片在页面上的位置之前无法延迟加载图片，这会导致它们加载速度变慢。

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

优雅降级

不支持 loading 属性的浏览器会忽略它。它们不会获得延迟加载的好处，但包含它不会产生负面影响。

常见问题解答

关于浏览器级延迟加载的一些常见问题。

我可以在 Chrome 中自动延迟加载图片吗？

以前，如果 Android 版 Chrome 上启用了简易模式，并且未提供 loading 属性或将其设置为 loading="auto"，则 Chromium 会自动延迟加载任何适合延迟的图片。但是，简易模式和 loading="auto" 已被弃用，并且没有计划在 Chrome 中提供图片的自动延迟加载。

我可以更改图片在加载之前需要靠近视口的程度吗？

这些值是硬编码的，无法通过 API 更改。但是，随着浏览器试验不同的阈值距离和变量，它们将来可能会发生变化。

CSS 背景图片可以使用 loading 属性吗？

不可以，您只能将其与 <img> 标记一起使用。

loading 可以用于视口中但未立即可见的图片吗？

使用 loading="lazy"可以防止在图片不可见但在计算距离内时加载图片。这些图片可能在轮播后面或被 CSS 隐藏以适应某些屏幕尺寸。例如，Chrome、Safari 和 Firefox 不会加载使用 display: none; 样式设置的图片，无论是在图片元素上还是在父元素上。但是，其他图片隐藏技术（例如使用 opacity:0 样式）仍然会导致浏览器加载图片。始终彻底测试您的实现，以确保其按预期运行。

Chrome 121 更改了水平滚动图片（如轮播）的行为。这些图片现在使用与垂直滚动相同的阈值。这意味着对于轮播用例，图片将在视口中可见之前加载。这意味着用户不太可能注意到图片加载，但代价是下载量增加。使用水平延迟加载演示来比较 Chrome 与 Safari 和 Firefox 中的行为。

如果我已经在使用第三方库或脚本来延迟加载图片怎么办？

由于现代浏览器内置了对延迟加载的完全支持，您可能不需要第三方库或脚本来延迟加载图片。

继续将第三方库与 loading="lazy" 一起使用的一个原因是为不支持该属性的浏览器提供 polyfill，或者更好地控制何时触发延迟加载。

如何处理不支持延迟加载的浏览器？

浏览器级图片延迟加载在所有主要浏览器中都得到了很好的支持，并且建议在大多数用例中使用，以消除对 JavaScript 的额外依赖。

但是，如果您需要支持更多浏览器或想要更好地控制延迟加载阈值，则可以使用第三方库来延迟加载您网站上的图片。

您可以使用 loading 属性来检测浏览器是否支持该功能

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

例如，lazysizes 是一个流行的 JavaScript 延迟加载库。您可以检测对 loading 属性的支持，以便仅在不支持 loading 时才加载 lazysizes 作为后备库。其工作原理如下

• 将 <img src> 替换为 <img data-src> 以避免在不受支持的浏览器中进行预加载。如果支持 loading 属性，则将 data-src 交换为 src。
• 如果不支持 loading，则从 lazysizes 加载后备库并启动它，使用 lazyload 类来指示要延迟加载哪些图片

<!-- 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/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

这是一个此模式的演示。在旧版浏览器中尝试它以查看后备方案的实际效果。

浏览器是否也支持 iframe 的延迟加载？

<iframe loading=lazy> 也已标准化。这使您可以使用 loading 属性来延迟加载 iframe。有关更多信息，请参阅是时候延迟加载屏幕外 iframe 了！

浏览器级延迟加载如何影响网页上的广告？

以图片或 iframe 形式向用户展示的所有广告都像任何其他图片或 iframe 一样进行延迟加载。

打印网页时如何处理图片？

打印页面时，所有图片和 iframe 都会立即加载。有关详细信息，请参阅问题 #875403。

Lighthouse 是否识别浏览器级延迟加载？

Lighthouse 6.0 及更高版本考虑了屏幕外图片延迟加载的方法，这些方法可以使用不同的阈值，从而使它们通过延迟屏幕外图片审核。

延迟加载图片以提高性能

浏览器对延迟加载图片的支持可以使您更轻松地提高页面性能。

您是否注意到在 Chrome 中启用此功能后有任何异常行为？提交错误！