首页 >web前端 >css教程 >5种懒惰加载图像以提高网站性能的技术

5种懒惰加载图像以提高网站性能的技术

Jennifer Aniston原创: 2025-02-08 09:30:11156浏览

5 Techniques for Lazy Loading Images to Boost Website Performance

现代网页应用中，图片已成为最常用的内容类型之一。虽然使用背景图片可以提升应用的视觉效果，但图片尺寸过大却会严重影响应用性能。

即使经过优化，图片仍然可能占用大量空间，导致用户等待时间过长。如果用户没有获得快速访问内容的体验，他们往往会失去耐心并转向其他网站，因此，高效的图片加载方案至关重要。

本文将介绍五种图片懒加载方法，帮助您优化网站，提升用户体验。这些方法适用于各种类型的图片，包括背景图片、内联图片和横幅图片。

关键要点

图片懒加载通过异步加载图片来提升网站性能，只有在页面可见内容完全加载后，或图片出现在浏览器视窗中时才加载。这对于使用移动设备和慢速网络的用户来说尤其重要。
原生懒加载是一种使用HTML的简单方法，几乎没有额外开销，但并非所有浏览器都支持此功能。Intersection Observer API是另一种易于实现且有效的方法，但同样并非所有浏览器都支持。
Lozad.js和Yall.js等JavaScript库可以快速轻松地实现图片、视频和iframe等的懒加载。它们使用Intersection Observer API，但需要考虑浏览器兼容性。
类似Medium网站的做法，在懒加载高分辨率图片的同时，先显示模糊的低分辨率图片，可以获得不错的视觉效果。这可以通过多种方式实现，例如Craig Buckler提出的高性能方法，该方法还支持视网膜屏幕。

什么是懒加载？

图片懒加载意味着异步加载网站上的图片。可以在页面可见内容完全加载后，或仅当图片出现在浏览器视窗中时，按需加载内容。这意味着如果用户没有向下滚动到底部，页面底部的图片甚至不会被加载，从而最终提高应用程序性能。

对于大多数网站来说，了解如何在HTML中启用懒加载至关重要。例如，尝试浏览您最喜欢的包含高清照片的网站，您很快就会发现网站只加载了有限数量的图片。当您向下滚动页面时，占位符图片会迅速被实际图片替换。

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

5 Techniques for Lazy Loading Images to Boost Website Performance

Unsplash.com上的懒加载示例

为什么要实现图片懒加载？

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

1. 提升DOM加载时间

如果您的网站使用JavaScript来显示内容或为用户提供某种功能，则快速加载DOM至关重要。脚本通常会在DOM完全加载后才开始运行。在一个包含大量图片的网站上，懒加载（或异步加载图片）可能决定着用户是继续浏览还是离开您的网站。

2. 节省带宽

由于大多数懒加载解决方案只在用户滚动到图片在视窗中可见的位置时才加载图片，因此如果用户从未到达该位置，这些图片将永远不会被加载。这意味着可以节省大量的带宽，这对于大多数用户（尤其是使用移动设备和慢速网络的用户）来说都是非常有益的。

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

没有完美的方法。

如果您精通JavaScript，那么实现您自己的懒加载解决方案应该不成问题。没有什么比自己编写代码更能赋予您控制权了。

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

1. 原生懒加载

当用户滚动网页时，图片和iframe的原生懒加载是一种直接加载内容的方法。您只需要将loading="lazy"属性添加到您的图片和iframe即可。

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance ">
<iframe loading="lazy" src="content.html"></iframe></code>

如您所见，不需要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和使用它懒加载图片的优秀教程。以下是他的解决方案：

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

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance ">
<iframe loading="lazy" src="content.html"></iframe></code>

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

在CSS中，您可以为每个图片指定一个min-height值，例如100px。这会给每个图片占位符（没有src属性的img元素）一个垂直尺寸：

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821665537.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance "></code>

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

<code class="language-css">img {
  min-height: 100px;
  /* more styles here */
}</code>

最后，您可以迭代所有图片并将它们添加到此iterationObserver实例中：

<code class="language-javascript">// 创建配置对象：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);</code>

此解决方案的优点是易于实现、有效且具有相交性。Observer承担了计算方面的大部分工作。

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

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

3. Lozad.js

5 Techniques for Lazy Loading Images to Boost Website Performance

lozad.js 懒加载JavaScript库

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

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

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

<code class="language-javascript">const imgs = document.querySelectorAll('[data-src]');
imgs.forEach(img => {
  observer.observe(img);
});</code>

<code class="language-bash">npm install --save lozad

yarn add lozad</code>

或者，您可以简单地使用CDN下载库，并将其添加到HTML页面底部的

lozad接下来，对于基本实现，请将类

添加到标记中的资源中：

<code class="language-javascript">import lozad from 'lozad';</code>

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

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821885662.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance "></code>

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

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

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