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

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

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

图像已成为现代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”属性有良好的支持，但截至撰写本文时，一些浏览器仍缺乏完全支持。

有关此HTML懒加载图像功能的深入文章，包括浏览器支持解决方法，请不要错过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);

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

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

lozad.js懒加载JavaScript库

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

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

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

1
2
3

npm install --save lozad

yarn add lozad

1

import lozad from 'lozad';

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

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 repo上下载代码。

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懒加载图像，请将值为“lazy”的“loading”属性添加到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”这样的插件来实施懒加载，而无需任何编码。

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