Lozad.js：高效的图片延迟加载

有几种不同的“传统”图片延迟加载方法。它们都需要 JavaScript 来判断图片是否当前在浏览器的视窗内。传统的做法可能是

• 监听 window 上的 scroll 和 resize 事件
• 使用 setInterval 等定时器

这些方法都有性能问题。

为什么传统做法效率不高？

上面列出的两种方法都存在问题，因为它们会反复工作，并且它们的函数会在计算元素相对于视窗的位置（以检查元素是否在视窗内）时触发强制布局。

为了解决这些性能问题，一些库会限制执行这些操作的函数调用，限制其执行次数。

即使这样，反复触发布局/重绘操作也会在用户与网站交互时消耗宝贵的时间，并导致“垃圾”（用户不喜欢网站交互时的迟钝感）。

我们可以使用另一种方法，它利用了一个新的浏览器 API，该 API 专为帮助我们处理延迟加载等任务而设计：Intersection Observer API。

这正是我自己的库 Lozad.js 使用的方法。

是什么让 Lozad.js 如此高效？

Intersection Observers 是主要成分。它们允许注册回调函数，当监视的元素进入或退出另一个元素（或视窗本身）时，这些函数会被调用。

虽然 Intersection Observers 不会提供精确的重叠像素，但它们允许监听事件，这些事件允许我们观察元素是否以 X%（可配置）进入其他元素，然后回调函数会被触发。当使用 Intersection Observers 进行延迟加载时，这正是我们的用例。

关于 Lozad.js 的快速事实

• 轻量级：仅 535 字节，已压缩和 gzip
• 无依赖项
• 使用 IntersectionObserver API
• 允许对动态添加的元素（不仅仅是图片）进行延迟加载，尽管需要自定义加载函数

用法

从 npm 安装

yarn add lozad

或通过 CDN

<script src="https://cdn.jsdelivr.net.cn/npm/lozad"></script>

在您的 HTML 中，为要延迟加载的任何图片添加一个类。该类可以通过配置更改，但默认值为“lozad”。

<img class="lozad" data-src="image.png">

还要注意，我们已删除图片的 src 属性，并将其替换为 data-src。这样可以防止图片在 JavaScript 执行并确定应该加载图片之前被加载。最终是否使用此方法取决于您，请考虑其带来的影响。使用此 HTML，图片在 JavaScript 执行之前将不会显示。它们在 RSS 或其他聚合中也不会显示。您可能希望过滤您的 HTML，仅当在您自己的网站上显示时才使用此标记模式，而不是其他地方。

在 JavaScript 中，使用选项初始化 Lozad 库

const observer = lozad(); // lazy loads elements with default selector as ".lozad"
observer.observe();

阅读 此处，了解 Lozad.js API 中提供的所有选项的完整列表。

演示

查看 Apoorv Saxena (@ApoorvSaxena) 在 CodePen 上的 Pen oGgxJr。

浏览器支持

浏览器支持有限，因为此功能相对较新。使用 官方 IntersectionObserver 填充程序 来克服此 API 的有限支持。