五种图片懒加载技术，大幅提升网站性能

本文详细介绍了五种图片懒加载技术，包括原生懒加载、Intersection Observer API、Lozad.js、模糊图像效果懒加载和Yall.js，帮助开发者优化网站性能，减少带宽使用并提升用户体验。

五种图片懒加载技术，大幅提升网站性能

在现代 Web 应用中，图片已成为最常用的内容类型之一。尽管使用背景图片可以提升应用的外观和体验，但图片尺寸的增加会显著影响应用性能。

即使经过适当优化，图片仍然可能占用大量资源，让用户等待访问网站内容。除非您找到一种不影响速度感知的图片加载解决方案，否则用户往往会失去耐心并转向其他网站。

本文介绍了五种懒加载图片的方法，您可以将它们添加到 Web 优化工具包中，以改善网站的用户体验。这些方法可用于懒加载应用中的各种图片类型，包括背景图片、内联图片和横幅图片。

关键要点

  • 懒加载图片可以通过异步加载图片来提升网站性能，仅在首屏内容完全加载后或图片出现在浏览器视口内时才加载。这对用户体验有显著影响，特别是对于在移动设备和慢速连接上访问 Web 的用户。
  • 原生懒加载是一种使用 HTML 的简单方法，零开销，但并非所有浏览器都支持此功能。Intersection Observer API 是另一种易于实施且有效的方法，但同样，并非所有浏览器都支持。
  • JavaScript 库如 Lozad.js 和 Yall.js 可用于快速轻松地实现图片、视频、iframe 等的懒加载。它们使用 Intersection Observer API，但需要考虑浏览器支持。
  • 通过使用模糊的低分辨率图片副本，在高分辨率版本懒加载时实现有趣的效果，如 Medium 所示。这可以通过多种方式实现，例如 Craig Buckler 的技术，性能高且支持视网膜屏幕。

什么是懒加载？

懒加载图片意味着在网站上异步加载图片。您可以在滚动时懒加载内容，在首屏内容完全加载后，或仅在需要出现在浏览器视口内时条件性地加载。这意味着如果用户没有一直滚动到底部，位于页面底部的图片甚至不会被加载，最终提升应用性能。

了解如何在 HTML 中启用懒加载对 Web 开发人员至关重要，因为大多数网站都需要这种方法。例如，尝试浏览您最喜欢的高分辨率图片网站，您很快会发现网站仅加载有限数量的图片。当您向下滚动页面时，占位符图片会快速填充实际图片以供预览。

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

Unsplash.com 上的懒加载效果

为什么应该对图片实施懒加载？

了解如何懒加载图片对于优化 Web 性能至关重要，特别是在具有大量视觉内容的页面上。以下是您应该考虑为网站懒加载图片的几个重要原因：

1. 改善 DOM 加载时间

如果您的网站使用 JavaScript 显示内容或为用户提供某种功能，快速加载 DOM 变得至关重要。脚本通常等待 DOM 完全加载后才开始运行。在具有大量图片的网站上，懒加载——或异步加载图片——可能决定用户是留下还是离开您的网站。

2. 有限的带宽使用

由于大多数懒加载解决方案仅在用户滚动到图片在视口内可见的位置时才加载图片，如果用户从未到达该点，这些图片将永远不会被加载。这意味着可观的带宽节省，大多数用户，特别是那些在移动设备和慢速连接上访问 Web 的用户，会感谢您。

懒加载图片有助于网站性能，但最好的方法是什么？没有完美的方法。

如果您精通 JavaScript，实施自己的懒加载解决方案应该不是问题。没有什么比亲自编码更能控制一切了。或者，您可以浏览 Web 寻找可行的方法，或加入讨论论坛分享想法。我正是这样做了，并发现了这五种有趣的技术。

1. 原生懒加载

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

1
2

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

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

loading 属性为我们提供了延迟屏幕外图片和 iframe 的选项，直到用户滚动到它们在页面上的位置。loading 可以取以下三个值之一：

  • lazy：非常适合懒加载
  • eager：指示浏览器立即加载指定内容
  • auto：将是否懒加载的选项留给浏览器

此方法无与伦比：零开销，是一种干净简单的在 HTML 中懒加载图片的方式。然而，尽管大多数主流浏览器对 loading 属性有良好的支持，但截至撰写本文时，一些浏览器仍缺乏完全支持。

有关此强大功能的深入文章，包括浏览器支持变通方案，请不要错过 Addy Osmani 的“Native image lazy-loading for the web!”。

2. 使用 Intersection Observer API 进行懒加载

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

以下是 MDN 对此 API 的介绍：

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

换句话说，Intersection Observer API 异步观察一个元素与另一个元素的交叉。

Denys Mishunov 有一个关于 Intersection Observer 和使用它懒加载图片的优秀教程。以下是他的解决方案的样子。

假设您想懒加载一个图片库。每个图片的标记将如下所示：

1

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

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

在 CSS 中，您可以为每个图片设置一个 min-height 值，比如 100px。这为每个图片占位符（没有 src 属性的 img 元素）提供了一个垂直维度：

1
2
3
4

img {
  min-height: 100px;
  /* 更多样式在这里 */
}

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// 创建配置对象：rootMargin 和 threshold
// 是接口公开的两个属性
const config = {
  rootMargin: '0px 0px 50px 0px',
  threshold: 0
};

// 将配置对象注册到 intersectionObserver 实例
let observer = new intersectionObserver(function(entries, self) {
  // 遍历每个条目
  entries.forEach(entry => {
    // 仅处理正在交叉的图片。
    // isIntersecting 是接口公开的属性
    if(entry.isIntersecting) {
      // 自定义函数，将路径从 data-src 复制到 src
      preloadImage(entry.target);
      // 图片现已就位，停止观察
      self.unobserve(entry.target);
    }
  });
}, config);

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

1
2
3
4

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

此解决方案的优点在于易于实施、有效，并且 Intersection Observer 在计算方面承担了繁重的工作。

在浏览器支持方面，所有主流浏览器的最新版本都支持 Intersection Observer API，除了 IE 11 和 Opera Mini。

您可以在 Denys 的文章中了解更多关于 Intersection Observer API 和此实现细节的信息。

3. Lozad.js

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

Lozad.js 是一个高性能、轻量且可配置的懒加载器，使用纯 JavaScript，无依赖。它是一个优秀的工具，用于在用户滚动时懒加载图片、视频和 iframe。

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

1
2
3

npm install --save lozad

yarn add lozad

1

import lozad from 'lozad';

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

1

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

接下来，对于基本实现，在标记中向资源添加类 lozad：

1

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

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

1
2

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

您可以在 Lozad GitHub 存储库中找到使用该库的所有细节。

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

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

如果您是 Medium 的读者，您肯定注意到网站如何加载帖子内的主图片。您首先看到的是图像的模糊低分辨率副本，而其高分辨率版本正在懒加载：

您可以通过结合使用 CSS 和 JavaScript 在 HTML 中懒加载图片时实现类似效果。

Medium 网站上的模糊占位符图片

Medium 网站上的高分辨率懒加载图片

您可以通过多种方式为此有趣的模糊效果添加懒加载。

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

  • 性能：仅 463 字节的 CSS 和 1,007 字节的缩小 JavaScript 代码。
  • 支持视网膜屏幕。
  • 无依赖：不需要 jQuery 或其他库和框架。
  • 逐步增强以应对旧版浏览器和失败的 JavaScript。

您可以在 How to Build Your Own Progressive Image Loader 中阅读所有相关内容，并在项目的 GitHub 存储库上下载代码。

5. Yall.js

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

在文档中包含 Yall 时，您需要按以下方式初始化它：

1
2
3
4

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

接下来，要懒加载一个简单的 img 元素，您在标记中需要做的只是：

1
2
3
4
5
6

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

注意以下事项：

  • 您向元素添加类 lazy。
  • src 的值是一个占位符图片。
  • 要懒加载的图片路径在 data-src 属性内。

以下是 Yall.js 的好处：

  • 使用 Intersection Observer API 具有出色的性能。
  • 极好的浏览器支持（可回溯到 IE11）。
  • 不需要其他依赖。

要了解更多关于 Yall.js 可以提供的内容以及更复杂的实现，请随时查看项目在 GitHub 上的页面。

结论

以上就是五种懒加载图片的方法，您可以开始实验并在项目中进行测试。了解如何懒加载图片对任何 Web 开发人员都是一项宝贵的技能，您可以通过加入 SitePoint 关于图片优化的论坛来学习更多技术或与他人分享您的专业知识。

关于懒加载图片的常见问题

什么是懒加载图片？

懒加载是一种 Web 开发技术，用于通过延迟加载某些元素（如图片）直到需要它们来改善网页性能。懒加载图片意味着图片仅在进入用户视口或在网页上可见时才加载，而不是在页面最初渲染时立即加载所有图片。

懒加载图片的好处是什么？

  • 改善网站性能
  • 更快的初始页面渲染，减少带宽使用
  • 增强用户体验
  • 减少服务器负载，提高 Web 应用的整体效率

如何在 HTML 中懒加载图片？

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

1

<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”这样的插件来无需任何编码实现懒加载。

Maria Antonietta Perna 是一名教师和技术作家。她喜欢摆弄很酷的 CSS 标准，并对前端代码的教学方法感到好奇。当不为 Web 编码或写作时，她喜欢阅读哲学书籍、长距离散步和欣赏美食。

comments powered by Disqus
© 2020 - 2025 qife
使用 Hugo 构建
主题 Stack 由 Jimmy 设计
本站总访问量次 本站访客数人次