给大家分享九个 JavaScript 图片懒加载库-木庄网络博客

本文摘自PHP中文网，作者coldplay.xixi，侵删。

javascript栏目介绍几个图片懒加载库。

相关免费学习推荐：javascript（视频）

为什么要图片懒加载

在 web 应用程序中性能至关重要。你可以拥有世界上最漂亮、最吸引人的网站，但如果它不能在浏览器上快速加载，人们会倾向于略过它。要想使你的网站表现得非常好，可能相当棘手。这是因为 web 开发中存在许多瓶颈，例如高代价的 JavaScript、缓慢的 web 字体显示、笨重的图片资源等等。

本文我们主要关注图片资源对网站的影响。根据 Jecelyn 研究，一个网页仅用于加载图片平均就要消耗 5MB 的数据。这对用户来说可能是一个沉重的负担，因为某些国家的移动数据非常昂贵。用户也会遇到站点加载时间过久的问题，尤其是在网速较慢的情况下。这些都会对你的网站产生负面影响。

根据 Jakob Nielson 研究，以下是一些你应该记住的重要统计数据：

网站加载时间低于 100 毫秒被认为是瞬时的。
100 到 300 毫秒之间的延迟是可以感知到的。
47% 的消费者希望网页在两秒钟或更短的时间内加载完成。
40% 的消费者在放弃网站之前，将等待不超过 3 秒加载时间。

懒加载是什么

有几种策略可以为网站的图片资源提供高效服务，而不会影响性能和质量，懒加载就是其中之一。懒加载是指只加载所需的内容，并将其余内容延迟到需要的时候。这个策略可以应用于图片、视频、文本和其他类型的数据。但大多数情况下，它适用于图片资源等笨重内容。

有好几种方法可以在网站上实现图片懒加载。例如可以使用 Intersection Observer API，或者使用事件处理程序来确定元素是否在视图中。还有几个功能强大的 JavaScript 库，可以根据需要和兼容性使用以下几种图片懒加载库的方法。让我们来看看吧！

Lazy Sizes

Lazy Sizes 是目前最好的懒加载库之一，在 Github 上拥有超过 14.1K 收藏，把它压缩后只有 3.4kB。它还支持大约 98.5% 的浏览器用户，同时它的文档也写的通俗易懂。

特点

包含对响应式图片的支持。
通过在用户代理的帮助下检测搜索引擎并立即加载所有图像，从而优化 SEO。
基于高效实用的代码。
当网络连接空闲时预先加载资源。
包含对 LQIPs 的支持。
支持 IntersectionObserver、MutationObserver 和 getElementsByClassName 等。
支持使用插件来扩展特性。
支持自动计算响应图片大小。

你可以在这里查看示例。

Lozad.js

Lozad.js 支持图片、iframe、广告、视频和其他元素的懒加载。它在 Github 上拥有近 6.4K 收藏，在社区里非常受欢迎。据研究小组称，这个库被特斯拉、多米诺、小米和 BBC 等几个品牌的网络应用程序所使用。它非常小巧，压缩后只有 1.1kB。由于它使用 IntersectionObserver API 和 MutationObserver API，所以它支持大约 92% 的浏览器用户。

特点

不存在依赖关系。
支持动态添加元素的懒加载。
完全使用 JavaScript。
包含对 LQIPs 和响应图片的支持。
比使用 getBoundingClientRect() 的库更高效。
Polyfills 可以在不受支持的浏览器上使用。

你可以在这里查看示例。

Tuupola 的 Lazyload

Tuupola 的 Lazyload 是 Github 上另一个流行的图片懒加载库，有近 8.4K 收藏。它使用了 IntersectionObserver API，并且简单易用。压缩后仅有 956 bytes，比其他的库都小。这可以归功于它只使用了 IntersectionObserver API，因为其他库使用了别的组合来实现更好的兼容性和性能。此外，由于这一点，目前 92% 的浏览器用户都支持它。

特点

为了方便起见，它包含了一个 jQuery 包装器。
包括对 LQIPs 和响应图片的支持。
可以通过传递其他参数来配置核心 IntersectionObserver API。

Andrea Verlicchi 的 Vanilla Lazyload

Vanilla lazy load 是另一个用于延迟加载图片、视频和 iframe 的纯粹 JavaScript 库。它在 Github 上非常受欢迎，有将近 1500 个存储库和包可供使用。它在 NPM 中每年有超过 190 万次的下载。把它压缩后仅有 2.7kB。与其他库类似，该库使用 IntersectionObserver API，92% 的浏览器用户支持该库。

搜索引擎优化友好，因为库不从搜索引擎覆盖图片。
支持不稳定的网络连接，因为库会在连接中断后自动重新加载图片。
如果图片退出视口，则取消加载图片。
包含对 LQIPs 和响应图片的支持。
完全使用 JavaScript。

你可以在这里查看示例。

Yall.js

Yall.js 是另外一个 JavaScript 库，也只使用 IntersectionObserver API 来延迟加载图片、视频、iframe 和 CSS 背景图片。这个库大约有 1.1K 收藏，并且有 91 个用户在其项目库中使用。这个库可以压缩到 1kB。正如我们在以前的库中所见，因为使用了 IntersectionObserver API，Yall.js 也支持 92% 的浏览器用户。必须注意，如果浏览器不支持 IntersectionObserver API，则不会有备份。在那种情况下你必须用 polyfill 。

特点

借助 MutationObserver API 支持动态加载元素的检测。
借助 requestIdleCallback 方法优化浏览器空闲时间。
支持通过 src 属性直接实现 LQIP。
支持延迟加载 CSS 背景。

Layzr.js

Layzr.js 是一个基于 JavaScript 的轻量级图片懒加载库。它主要使用 Element.classList，很少有 ES5 数组方法和 requestAnimationFrame 方法。由于这些 API，97% 以上的浏览器用户都支持该库。Layzr.js 在 Github 上拥有超过 5.6K 收藏，非常受欢迎，把它压缩后只有 1kB。