延迟加载图像以提高网站性能的五种方法

图像已成为现代 Web 应用程序中最常用的内容类型之一。虽然使用背景图像可以改善应用程序的外观和感觉，但增加图像大小会显著影响应用程序的性能。  

即使经过适当优化，图片也会占用很大空间，让用户不得不等待才能访问您网站上的内容。通常，他们会不耐烦并转到其他地方，除非您能找到不影响速度感知的图片加载解决方案。

在本文中，您将了解五种延迟加载图像的方法，您可以将它们添加到您的 Web 优化工具包中，以改善您网站上的用户体验。您可以使用这些方法在应用程序中延迟加载各种类型的图像，包括背景图像、内联图像和横幅图像。

关键要点

• 更快的页面加载：延迟加载图像通过仅加载用户视口中可见的图像来帮助提高网站速度。

• 更好的用户体验：延迟加载通过减少加载时间增强了浏览体验，尤其是对于连接速度较慢或移动设备上的用户。

• 节省带宽：仅在需要时加载图像，从而节省带宽并减少用户和服务器的数据使用量。

• 简单实现：您可以使用 HTML“loading”属性或更高级的方法（如 Intersection Observer API）轻松实现延迟加载。

• SEO 优势：延迟加载带来的更快加载时间有助于提高搜索引擎排名，帮助您的网站在搜索结果中表现更好。

什么是延迟加载？

延迟加载图像意味着在网站上异步加载图像。您可以在滚动时延迟加载内容，在首屏内容完全加载后，或者在只需要出现在浏览器视口中时有条件地加载内容。这意味着，如果用户没有完全向下滚动，则放置在页面底部的图像甚至不会被加载，最终提高应用程序的性能。

对于 Web 开发人员来说，了解如何在 HTML 中启用延迟加载至关重要，因为大多数网站都需要这种方法。例如，尝试浏览您最喜欢的高分辨率照片在线搜索网站，您很快就会意识到该网站仅加载有限数量的图像。当您向下滚动页面时，占位符图像很快就会被实际图像填满以供预览。

例如，请注意Unsplash.com上的加载器：将页面的该部分滚动到视图中会触发用全分辨率照片替换占位符：

为什么应该实现图像的延迟加载？

了解如何延迟加载图像对于优化 Web 性能至关重要，尤其是在包含大量视觉内容的页面上。以下是您应该考虑为网站延迟加载图像的几个很好的理由：

1.改善DOM加载时间

• 如果您的网站使用JavaScript来显示内容或向用户提供某种功能，那么快速加载 DOM 就变得至关重要。脚本通常会等到 DOM 完全加载后才开始运行。在包含大量图片的网站上，延迟加载（或异步加载图片）可能会决定用户是留在您的网站还是离开您的网站。

2. 限制带宽使用

• 由于大多数延迟加载解决方案仅在用户滚动到视口内图像可见的位置时才加载图像，因此如果用户从未到达该点，则永远不会加载这些图像。这意味着可观的带宽节省，大多数用户（尤其是那些通过移动设备和慢速连接访问网络的用户）都会感谢您。

好吧，延迟加载图像有助于提高网站性能，但最好的方法是什么呢？

没有完美的方法。

如果您对 JavaScript 情有独钟，那么实现自己的延迟加载解决方案应该不成问题。没有什么比自己编写代码更能让您掌控全局了。

或者，您可以浏览网络寻找可行的方法或加入讨论论坛并分享想法。我就是这么做的，并发现了这五种有趣的技术。

1. 原生延迟加载

原生延迟加载图片和 iframe 是一种在用户滚动网页时延迟加载内容的简单方法。您只需将loading=”lazy”属性添加到图片和 iframe 中即可。

<img src="myimage.jpg" loading="lazy" alt="..." />
<iframe src="content.html" loading="lazy"></iframe>

如您所见，没有 JavaScript，没有动态交换 src 属性的值，只有普通的 HTML。此方法是如何在 HTML 中添加延迟加载而无需任何额外开销的完美示例。

“loading”属性让我们可以延迟屏幕外的图像和 iframe，直到用户滚动到页面上的位置。loading 可以采用以下三个值中的任何一个：

• lazy：非常适合延迟加载

• eager：指示浏览器立即加载指定内容

• 自动：将延迟加载或不延迟加载的选项留给浏览器。

这种方法无可匹敌：它没有任何开销，并且是一种简洁明了的 HTML 图像延迟加载方法。然而，尽管大多数主流浏览器都对“loading”属性提供了良好的支持，但截至撰写本文时，某些浏览器仍未完全支持。

2. 使用 Intersection Observer API 进行延迟加载

Intersection Observer API是一个现代接口，您可以利用它来延迟加载图像和其他内容。

MDN 是这样介绍这个 API 的：

交叉点观察者 API 提供了一种异步观察目标元素与祖先元素或顶级文档视口交叉点变化的方法。

换句话说，Intersection Observer API 异步监视一个元素与另一个元素的交集。

Denys Mishunov 有一个关于 Intersection Observer 以及使用它进行延迟加载图像的精彩教程。以下是他的解决方案。

假设您想延迟加载图片库。每张图片的标记如下所示：

<img data-src="image.jpg" alt="test image">

这里，图片的路径包含在data-src属性中，而不是src属性中。原因是使用src意味着图片会立即加载，而这并不是你想要的。

在CSS中，你可以给每个图像一个最小高度值，比如说 100px。这会给每个图像占位符（没有 src 属性的 img 元素）一个垂直尺寸：

img { min-height: 100px;
  /* more styles here */
  }

然后，在 JavaScript 文档中，您需要创建一个配置对象并将其注册到IntersectionObserver实例中：

// create config object: rootMargin and threshold
// are two properties exposed by the interface
const config = {
  rootMargin: '0px 0px 50px 0px',
  threshold: 0
};

// register the config object with an instance
// of intersectionObserver
let observer = new intersectionObserver(function(entries, self) {
  // iterate over each entry
  entries.forEach(entry => {
    // process just the images that are intersecting.
    // isIntersecting is a property exposed by the interface
    if(entry.isIntersecting) {
      // custom function that copies the path to the img
      // from data-src to src
      preloadImage(entry.target);
      // the image is now in place, stop watching
      self.unobserve(entry.target);
    }
  });
}, config);

最后，您可以遍历所有图像并将它们添加到此 iterationObserver 实例中：

const imgs = document.querySelectorAll('[data-src]');
imgs.forEach(img => {
  observer.observe(img);
});

这个解决方案的优点是实施起来很简单，很有效，而且有交集。Observer 负责计算方面的繁重工作。

在浏览器支持方面，除 IE 11 和 Opera Mini 外，所有主流浏览器均在其最新版本中支持 Intersection Observer API。

3. Lozad.js

实现图像延迟加载的一个快速简便的替代方法是让 JS 库为您完成大部分工作。

Lozad.js是一款高性能、轻量且可配置的延迟加载器，它使用纯 JavaScript，没有任何依赖项。当用户滚动图片、视频和 iframe 时，它是一款出色的延迟加载 JavaScript 工具。

您可以使用npm/Yarn安装 Lozad ，并使用您选择的模块捆绑器导入它：

npm install --save lozad
yarn add lozad

import lozad from 'lozad';

或者，您可以简单地使用 CDN 下载该库并将其添加到 HTML 页面底部的 <script> 标签中：

<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

接下来，对于基本实现，将lozad类添加到标记中的资产中：

<img class="lozad" data-src="img.jpg">

最后，在你的 JS 文档中实例化 Lozad：

const observer = lozad();
observer.observe();

如果您不想了解 Intersection Observer API，或者只是在寻找一种适用于各种内容类型的快速实现，那么 Lozad 是一个不错的选择。

4. 带有模糊图像效果的延迟加载

如果你是Medium 的读者，你肯定注意到了该网站如何在文章中加载主图。你首先看到的是模糊的低分辨率图像副本，而其高分辨率版本是延迟加载的：

通过结合使用 CSS和 JavaScript ，您可以在 HTML 中延迟加载图像时实现类似的效果。

您可以通过多种方式为具有这种有趣的模糊效果的图像添加延迟加载。

我最喜欢的技术是 Craig Buckler 的技术。以下是此解决方案的所有优点：

• 性能：仅 463 字节的 CSS 和 1,007 字节的精简JavaScript 代码。

• 支持视网膜屏幕。

• 无依赖：不需要 jQuery 或其他库和框架。

• 逐步增强以抵消旧版浏览器和失败的 JavaScript 的影响。

5. Yall.js

Yall.js是一个功能丰富的 JavaScript 库，它使用 Intersection Observer API 在用户滚动时延迟加载 JavaScript。它支持图像、视频、iframe，并在必要时巧妙地回退到传统的事件处理程序技术。

当将 Yall 包含到您的文档中时，您需要按如下方式初始化它：

<script src="yall.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", yall);
</script>

接下来，要延迟加载一个简单的 img 元素，您需要在标记中执行以下操作：

<img 
  class="lazy" 
  src="placeholder.jpg" 
  data-src="image-to-lazy-load.jpg" 
  alt="Alternative text to describe image."
></img>

请注意以下几点：

• 您将lazy类添加到元素中。

• src 的值是一个占位符图像。

• 您想要延迟加载的图像的路径位于 data-src 属性内。

Yall.js 的优点如下：

• Intersection Observer API 的性能非常出色。

• 出色的浏览器支持（可追溯到 IE11）。

• 不需要其他依赖项。

要了解 Yall.js 可以提供的更多信息以及更复杂的实现，请随时查看GitHub 上的项目页面【https://github.com/malchata/yall.js】。

结论

以上就是五种延迟加载图片的方法，您可以开始尝试并在项目中进行测试。了解如何延迟加载图片对于任何 Web 开发人员来说都是一项宝贵的技能。

关于延迟加载图像的常见问题解答

什么是延迟加载图像？

延迟加载是一种网页开发技术，用于通过延迟加载某些元素（例如图片）直至需要时才加载，从而提高网页的性能。延迟加载图片意味着只有当图片进入用户视口或在网页上可见时才会加载，而不是在网页首次呈现时立即加载所有图片。

延迟加载图像有什么好处？

• 提高网站性能

• 初始页面渲染速度更快，带宽使用量减少。

• 增强用户体验。

• 减少服务器负载并提高 Web 应用程序的整体效率。

如何在 HTML 中延迟加载图像？

要在 HTML 中为图像添加延迟加载，可以使用“loading”属性。“loading”属性是一个标准 HTML 属性，允许您控制何时加载图像。要启用 HTML 延迟加载图像，请将值为“lazy”的“loading”属性添加到 img 元素。这会告诉浏览器仅在图像即将进入视口时加载图像。以下是示例：

<img src="image.jpg" alt="Description" loading="lazy">

延迟加载图像好吗？

是的，使用延迟加载图像 HTML 被认为是 Web 开发中的一种有益做法，原因有多种。它通过推迟非必要的图像加载来提高页面加载速度，从而加快初始页面渲染速度并改善用户体验。这种方法节省带宽，对数据计划有限或互联网连接较慢的用户有利。此外，它通过提高页面加载速度对搜索引擎优化 (SEO) 产生积极影响，并且符合渐进增强的原则。通过减少感知等待时间并在加载期间提供视觉提示，延迟加载有助于提供更流畅、更高效的浏览体验，尤其是在移动设备上。

如何知道图像是否是延迟加载？

要确认您是否已正确实施延迟加载图像 HTML，您可以检查 HTML 源代码或使用浏览器开发人员工具。通过右键单击图像并选择“检查”或“检查元素”，您可以在开发人员工具面板中检查代表图像的 img 元素。查找 img 元素中是否存在“loading”属性。如果“loading”属性设置为“lazy”，则表示图像已配置为延迟加载。使用浏览器开发人员工具，您可以通过检查图像的属性来快速确定图像的延迟加载状态。

如何使用 JavaScript 实现图像的延迟加载？

要使用 JavaScript 实现图像的延迟加载，您可以使用 Lozad.js 或 Yall.js 等库，也可以使用 Intersection Observer API 编写自己的自定义解决方案。这些库允许您在滚动时延迟加载内容，方法是监控元素何时进入视口并仅在该时刻加载它们。

延迟加载图像会影响 SEO 吗？

是的，延迟加载图片可以对 SEO 产生积极影响。通过缩短页面加载时间并减少最初需要加载的数据量，延迟加载可以帮助您的网站在搜索引擎结果中获得更好的排名。更快的页面速度是 Google 等搜索引擎已知的排名因素，延迟加载可以确保您网站的图片不会降低整体性能，从而有助于提高排名。

原生的惰性加载和基于 JavaScript 的惰性加载有什么区别？

原生延迟加载依赖于浏览器对 <img> 和 <iframe> 标签中“loading”属性的内置支持。此方法很简单，不需要额外的 JavaScript。另一方面，基于 JavaScript 的延迟加载通常使用 Lozad.js 或 Intersection Observer API 等库实现，可提供更大的灵活性和自定义性。

延迟加载图像有什么缺点吗？

主要的缺点是，当用户向下滚动页面时，图像加载可能会稍微延迟。此外，一些较旧的浏览器可能不支持延迟加载。

我可以在 WordPress 中延迟加载图像吗？

是的，您可以轻松地在 WordPress 中延迟加载图像。许多主题现在默认支持原生延迟加载，但您也可以使用“Lazy Load by WP Rocket”或“Smush”等插件来实现延迟加载，而无需任何编码。