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

在现代网络应用中，图片已成为最常用的内容类型之一。尽管使用背景图片能提升应用的外观和感觉，但增加图片大小会显著影响应用性能。

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

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

关键要点

懒加载图片可以通过异步加载图片来提升网站性能，仅在首屏内容完全加载后或图片出现在浏览器视口中时才加载。这对用户体验至关重要，尤其是对于在移动设备和慢速连接上访问网络的用户。

原生懒加载是一种使用HTML的简单方法，零开销，但并非所有浏览器都支持此功能。Intersection Observer API是另一种易于实施且有效的方法，但同样，并非所有浏览器都支持。

JavaScript库如Lozad.js和Yall.js可用于快速简便地实现图片、视频、iframe等的懒加载。它们使用Intersection Observer API，但需要考虑浏览器支持。

通过使用模糊的低分辨率图片副本，同时懒加载高分辨率版本，可以实现有趣的懒加载效果，如在Medium上所见。这可以通过多种方式实现，例如Craig Buckler的技术，性能高且支持视网膜屏幕。

什么是懒加载？

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

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

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

Unsplash.com上的懒加载实践

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

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

改善DOM加载时间

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

有限带宽使用

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

懒加载图片有助于网站性能，但最佳方法是什么？

没有完美的方法。

如果您精通JavaScript，实施自己的懒加载解决方案应该不是问题。没有什么比亲自编码更能控制。

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

1. 原生懒加载

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

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

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

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

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

1
2
3


npm install --save lozad

yarn add lozad

1

import lozad from 'lozad';