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

Blazy.js

Blazy.js 是另一个轻量级的 JavaScript 懒加载库，能够处理图片、视频和 iframe。它在 Github 上非常流行，有 2.6K 收藏，目前有超过 860 个开源项目库在使用。它压缩后只有 1.9kB。

使用 Element.getBoundingClientRect() 方法，与实现 IntersectionObserver API 的其他库相比，该方法可能无法执行。但是由于这种方法，这个库有超过 98% 的浏览器用户支持。它还使用 Element.closest()。这个 API 的浏览器支持率仅超过 94%。在这种情况下，您不必担心遗漏的 6%，因为库包含一个用于不支持浏览器的 polyfill。

特点

用于每月访问量达数百万的实际网站。
不存在依赖关系。
支持响应图片。
类似 Layzr.js 允许加载具有偏移量的元素。
带有示例代码的清晰文档。
支持 AMD、CommonJS 和 globals 等模块格式。
非常容易提供视网膜图片。

你可以在这里查看示例。

Responsively Lazy

Responsively lazy 也是用于图片的懒加载库。它的内容简洁，压缩后只有 1.1kB。由于它良好的语法实现，让其从众多库中脱颖而出。上面我们讨论过的大多数库都要求您对禁用 javascript 的浏览器使用 noscript 标记，忽略 src 属性等。但是 lazy 可以使用传统的 src 属性，并为受支持的浏览器添加 srcset 和 src 属性。这使得这个库对搜索引擎优化（SEO）友好。这个库也使用 Element.getBoundingClientRect() 因此，因此强制布局重排也将出现在该库中。

此外，这个库在 Github 上有近 1.1K 收藏，几乎 95% 的浏览器用户都支持这个库。

特点

支持响应式图片。
支持 webp。
对搜索引擎优化（SEO）友好。
可用的自定义项不多。

你可以在这里查看示例。

LazyestLoad.js

LazyestLoad.js 是此列表中最小的库之一。它只有 700 字节，压缩后仅仅 639 字节。这个库有两个版本，lazyload 和 lazyestload。它们都有不同的用法，lazyload 版本的工作方式与普通库类似，图片将在其即将进入视口时加载；但是 lazyestload 版本只在用户停止滚动且图片在视口中或在 100 像素以内时，才会加载图片。这有助于减少网络负荷，如果用户只是滚动而不暂停看图片。

它主要使用 Element.getBoundingClientRect() 方法，与其他实现相比效率不高，还有众所周知的触发布局重排。

这个库只处理图片，不像其他库可以处理视频和 iframe 的库。它在 Github 上还有超过 1.5 万收藏。

特点

简单直截了当。
不允许像其他库一样进行大量自定义。
支持响应式图片。
文档不够详细。

你可以查看 lazyload 示例和查看 lazyestload 示例。

随着大多数现代浏览器都将支持原生的懒加载，因此建议使用原生实现。原生懒加载还可以确保即使在浏览器中禁用 JavaScript，图片也可以延迟加载。只需在 img 标记中使用 loading="lazy" 属性，就可以省去所有麻烦。

大多数现代浏览器都支持原生懒加载，并且也即将支持 Safari 浏览器。目前，浏览器的支持率为 74%，如果浏览器不支持原生实现则可以使用 polyfill 或者上述懒加载库中的某个库。

为了安全起见，您可能仍需要使用动态导入来实现其中一个库。

了解你的目标受众

如果您仔细分析以上所有给定的库，您会发现它们在三个方面存在激烈的竞争：性能、大小和浏览器兼容性（用户覆盖率）。这些通常不得不牺牲至少一个来提高另一个的水平。

例如，如果您使用实现 IntersectionObserver API 的库，您将获得一个高性能的库，但它的用户覆盖范围会更小。如果需要修补，则需要有后备选项，例如 polyfills，这将增加库的整体大小。

在另一个示例中，如果懒加载库使用 getBoundingClientRect() 方法，它的性能将不如 IntersectionObserver API，因为众所周知它存在强制布局回流问题。虽然牺牲了性能，但用户覆盖率将高于前者。希望我能把这一点说清楚。

如何将兼容性问题降至最低并最大限度地提高性能？

可以通过了解目标受众及其浏览器使用情况来改进这些方面。如果你知道你的目标受众和他们使用的浏览器，你可以确保你的延迟加载的实现更适合那些浏览器版本。这将减少对不受支持的浏览器包含 polyfill 的需要，因为已经知道需要关注哪些浏览器。当你有一个异常值（不支持的浏览器），图片可以直接加载没有任何延迟或延迟。如果你对受众有很好的了解，那么这些异常值的数量将可以忽略不计。

这种方法将有助于使用性能良好的实现库，通过忽略浏览器异常将库大小保持在最小值，并支持目标用户的浏览器版本。

本文简要讨论了 JavaScript 的懒加载库以及一些提高效率和改善用户体验的方法。请在下面的评论中发表你的看法。

感谢阅读，祝编码快乐！！

以上就是给大家分享九个 JavaScript 图片懒加载库的详细内容，更多文章请关注木庄网络博客！

返回前面的内容