QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 3719|回复: 0

[HTML/CSS/JS] 九个 JavaScript 图片懒加载库

[复制链接]

等级头衔

积分成就    金币 : 2861
   泡泡 : 1516
   精华 : 6
   在线时间 : 1322 小时
   最后登录 : 2025-9-17

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2020-12-31 12:05:38 | 显示全部楼层 |阅读模式
为什么要图片懒加载
% g# J# C. f* P. d- t# V       在 web 应用程序中性能至关重要。你可以拥有世界上最漂亮、最吸引人的网站,但如果它不能在浏览器上快速加载,人们会倾向于略过它。要想使你的网站表现得非常好,可能相当棘手。这是因为 web 开发中存在许多瓶颈,例如耗费性能的 JavaScript、解析缓慢的 web 字体显示、 尺寸过大的图片资源等等。& s) @5 ^! O( B! y. O3 q
       本文我们主要关注图片资源对网站的影响。根据 Jecelyn 研究,一个网页仅用于加载图片平均就要消耗 5MB 的流量。这对用户来说可能是一个沉重的负担,因为某些国家的移动流量非常昂贵。用户也会遇到站点加载时间过久的问题,尤其是在网速较慢的情况下。这些都会对你的网站产生负面影响。
+ X. q6 i, a" c根据 Jakob Nielson 研究,以下是一些你应该记住的重要统计数据:
0 }& h; N2 B+ F6 r! O; _
  • 网站加载时间低于 100 毫秒被认为是瞬时的。
  • 100 到 300 毫秒之间的延迟是可以感知到的。
  • 47% 的用户希望网页在两秒钟或更短的时间内加载完成。
  • 40% 的用户在放弃网站之前,将等待不超过 3 秒加载时间。
    9 J0 h! v5 K; A. \+ k) W4 H- H5 E' K+ F
什么是懒加载
& U( K# N! F) r, ?: Y4 c5 E       有几种策略可以为网站的图片资源提供高效服务,而不会影响性能和质量,懒加载就是其中之一。懒加载是指只加载所需的内容,并将其余内容延迟到需要的时候。这个策略可以应用于图片、视频、文本和其他类型的数据。但大多数情况下,它适用于图片资源等大体积的内容。
# \$ e( p7 H" I& F# n  ]* Q       有好几种方法可以在网站上实现图片懒加载。例如可以使用 Intersection Observer API,或者使用事件处理程序来确定元素是否在视图中。还有几个功能强大的 JavaScript 库,可以根据需要和兼容性使用以下几种图片懒加载库的方法。5 i# \5 c# B& w: w' x. {3 U& C
Lazy Sizes7 D' U0 Z6 d) l, r1 ^  j
       Lazy Sizes 是目前最好的懒加载库之一,在 Github 上拥有超过 14.1K 收藏,把它压缩后只有 3.4kB。该库的浏览器端支持率达到了 98.5%,同时它的文档也写的通俗易懂。
4 T+ M+ S9 F% A0 s特点:" w! A; ~: n! E# K! x! _
  • 包含对响应式图片的支持。
  • 通过在用户代理的帮助下检测搜索引擎并立即加载所有图像,从而优化 SEO。
  • 基于高效实用的代码。
  • 当网络连接空闲时预先加载资源。
  • 包含对 LQIPs 的支持。
  • 支持 IntersectionObserver、MutationObserver 和 getElementsByClassName 等。
  • 支持使用插件来扩展特性。
  • 支持自动计算响应图片大小。
    4 @/ f# ~( g" c4 I1 B
Lozad.js
5 o  o; o: _0 F5 p1 l* G       Lozad.js 支持图片、iframe、广告、视频和其他元素的懒加载。它在 Github 上拥有近 6.4K 的 star,在社区里非常受欢迎。据研究小组称,这个库被特斯拉、多米诺、小米和 BBC 等几个品牌的网络应用程序所使用。它非常小巧,压缩后只有 1.1kB。由于它使用 IntersectionObserver API 和 MutationObserver API,所以它的浏览器支持率只有 92% 左右。1 K/ c  X, N4 |- V
特点:& F  q! ^" z9 Y9 e
  • 不存在依赖关系。
  • 支持动态添加元素的懒加载。
  • 完全使用 JavaScript。
  • 包含对 LQIPs 和响应图片的支持。
  • 比使用 getBoundingClientRect() 的库更高效。
  • Polyfills 可以在不受支持的浏览器上使用。
    0 F2 U) S9 _. U6 R
Tuupola 的 Lazyload# y" C' V0 k: r5 Y
       Lazyload by Tuupola 是 Github 上另一个流行的图片懒加载库,有近 8.4K 的 star。它使用了 IntersectionObserver API,并且简单易用。压缩后仅有 956 bytes,比其他的库都小。这可以归功于它只使用了 IntersectionObserver API,因为其他库使用了别的组合来实现更好的兼容性和性能。此外,由于这一点,目前其浏览器支持率占比为 92%。
6 U* Q" l8 O5 v3 q- [& {  _- J1 U特点:' Z7 s0 r4 j2 P- L0 l
  • 为了方便起见,它包含了一个 jQuery 包装器。
  • 包括对 LQIPs 和响应图片的支持。
  • 可以通过传递其他参数来配置核心 IntersectionObserver API。
    $ ^# g8 {4 M9 P/ O1 U8 V
Andrea Verlicchi 的 Vanilla Lazyload
% w% D! w5 i7 c2 m5 M       Vanilla lazy load 是另一个用于延迟加载图片、视频和 iframe 的纯粹 JavaScript 库。它在 Github 上非常受欢迎,有将近 1500 个存储库和包可供使用。它在 NPM 中每年有超过 190 万次的下载。把它压缩后仅有 2.7kB。与其他库类似,该库使用 IntersectionObserver API,目前其浏览器支持率为 92%。
) @7 H& @9 d3 V0 x) c: `特点:
$ w" C9 p% V, C: J" `: K: y
  • 搜索引擎优化友好,因为库不从搜索引擎覆盖图片。
  • 支持不稳定的网络连接,因为库会在连接中断后自动重新加载图片。
  • 如果图片退出视口,则取消加载图片。
  • 包含对 LQIPs 和响应图片的支持。
  • 完全使用 JavaScript。) u- T; H, [% V5 Y
Yall.js
+ |; K. r, v8 h+ G/ s7 e       Yall.js 是另外一个 JavaScript 库,也只使用 IntersectionObserver API 来延迟加载图片、视频、iframe 和 CSS 背景图片。这个库大约有 1.1K 的 star,并且有 91 个用户在其项目库中使用。这个库可以压缩到 1kB。正如我们在以前的库中所见,因为使用了 IntersectionObserver API,Yall.js 的浏览器支持率有 92%。必须注意,如果浏览器不支持 IntersectionObserver API,则不会有备份。在那种情况下你必须用 polyfill 。
$ n' ^% l& v* X3 p特点:6 s$ b. i7 P. @" a
  • 借助 MutationObserver API 支持动态加载元素的检测。
  • 借助 requestIdleCallback 方法优化浏览器空闲时间。
  • 支持通过 src 属性直接实现 LQIP。
  • 支持延迟加载 CSS 背景图。
    $ E9 I  N( Z; Y) \9 m* `( u8 U
Layzr.js
4 R# G6 x2 V7 U9 W' v6 v- U8 W       Layzr.js 是一个基于 JavaScript 的轻量级图片懒加载库。它主要使用 Element.classList,很少有 ES5 数组方法和 requestAnimationFrame 方法。由于这些 API,97% 以上的浏览器用户都支持该库。Layzr.js 在 Github 上拥有超过 5.6K 收藏,非常受欢迎,把它压缩后只有 1kB。
8 M+ `( r, E  L8 R1 G- Y3 l特点:
( J6 R( o+ M$ ]
  • 不依赖于任何其他库。
  • 基于浏览器兼容性和可用性智能选择图片源。
  • 支持动态添加的元素。
  • 清晰简洁的文档和示例。
  • 具有阈值属性的视口调整图片懒加载,可以根据需要提前或稍后加载图片。
    & e7 m1 G$ D  E" W5 V
Blazy.js
- Q: r/ B0 x8 S1 K' ^       Blazy.js 是另一个轻量级的 JavaScript 懒加载库,能够处理图片、视频和 iframe。它在 Github 上非常流行,有 2.6K 的 star,目前有超过 860 个开源项目库在使用。它压缩后只有 1.9kB。
+ G$ `" l( H4 h) a5 J, n# V       使用 Element.getBoundingClientRect() 方法,与实现 IntersectionObserver API 的其他库相比,该方法可能无法执行。但是由于这种方法,这个库有超过 98% 的浏览器用户支持。它还使用 Element.closest()。这个 API 的浏览器支持率仅超过 94%。在这种情况下,您不必担心遗漏的 6%,因为库包含一个用于不支持浏览器的 polyfill。
& K- Y" H/ [; z) J7 k1 C+ V1 f特点:
4 k$ l4 }* a# P9 ?, @! z$ \/ Z
  • 用于每月访问量达数百万的实际网站。
  • 不存在依赖关系。
  • 支持响应图片。
  • 类似 Layzr.js 允许加载具有偏移量的元素。
  • 带有示例代码的清晰文档。
  • 支持 AMD、CommonJS 和 globals 等模块格式。
  • 非常容易提供视网膜图片。
    ) H7 |! R& H9 W7 G  ?0 N; B
Responsively Lazy0 D) R9 p0 D6 @. n4 O
       Responsively lazy 也是用于图片的懒加载库。它的内容简洁,压缩后只有 1.1kB。由于它良好的语法实现,让其从众多库中脱颖而出。上面我们讨论过的大多数库都要求您对禁用 javascript 的浏览器使用 noscript 标记,忽略 src 属性等。但是 lazy 可以使用传统的 src 属性,并为受支持的浏览器添加 srcset 和 data-src 属性。这使得这个库对搜索引擎优化(SEO)友好。这个库也使用 Element.getBoundingClientRect() 因此,因此强制布局重排也将出现在该库中。
3 ?  a  L* a# V9 }3 W5 q       此外,这个库在 Github 上有近 1.1K 的 star,几乎 95% 的浏览器用户都支持这个库。
& [- i5 L0 Q! `  O特点:: ~+ H5 F- d  s* [  ~
  • 支持响应式图片。
  • 支持 webp 格式图片。
  • 对搜索引擎优化(SEO)友好。
  • 可用的自定义项不多。
    + M( g, M+ b" g9 u7 h) l7 ~
LazyestLoad.js6 l6 }* W9 ]0 Y5 V. x* ~/ O
       LazyestLoad.js 是此列表中最小的库之一。它只有 700 字节,压缩后仅仅 639 字节。这个库有两个版本,lazyload 和 lazyestload。它们都有不同的用法,lazyload 版本的工作方式与普通库类似,图片将在其即将进入视口时加载;但是 lazyestload 版本只在用户停止滚动且图片在视口中或在 100 像素以内时,才会加载图片。这有助于减少网络负荷,如果用户只是滚动而不暂停看图片。
! k6 _0 U" A% [       它主要使用 Element.getBoundingClientRect() 方法,与其他实现相比效率不高,还有众所周知的触发布局重排。这个库只处理图片,不像其他库可以处理视频和 iframe 的库。它在 Github 上还有超过 1.5K 的 star。4 R" |) w& W3 ]( v; f; m5 z+ J
特点:* n5 R; d6 g4 t4 m
  • 简单直截了当。
  • 不允许像其他库一样进行大量自定义。
  • 支持响应式图片。
  • 文档不够详细。8 p: @3 D+ Z1 R8 {6 {0 H
       随着大多数现代浏览器都将支持原生的懒加载,因此建议使用原生实现。原生懒加载还可以确保即使在浏览器中禁用 JavaScript,图片也可以延迟加载。只需在 img 标记中使用 loading="lazy" 属性,就可以省去所有麻烦。3 p1 q; T; u, D6 ]& g0 q
       大多数现代浏览器都支持原生懒加载,并且也即将支持 Safari 浏览器。目前,浏览器的支持率为 74%,如果浏览器不支持原生实现则可以使用 polyfill 或者上述懒加载库中的某个库。4 L1 Y( w5 S( ]3 ?' X8 h
了解你的目标受众) O: @6 F! n5 ]2 |, h: |
       如果您仔细分析以上所有给定的库,您会发现它们在三个方面存在激烈的竞争:性能、大小和浏览器兼容性(用户覆盖率)。这些通常不得不牺牲至少一个来提高另一个的水平。
: [% w, N# ^2 o" {4 {       例如,如果您使用实现 IntersectionObserver API 的库,您将获得一个高性能的库,但它的用户覆盖范围会更小。如果需要修补,则需要有后备选项,例如 polyfills,这将增加库的整体大小。
; g& i% M/ X, W) ?+ a" F       如果懒加载库使用 getBoundingClientRect() 方法,它的性能将不如 IntersectionObserver API,因为众所周知它存在强制布局回流问题。虽然牺牲了性能,但用户覆盖率将高于前者。希望我能把这一点说清楚。
4 ^$ E9 L6 b  [7 x! ~4 |5 a* y  F如何将兼容性问题降至最低并最大限度地提高性能?( V$ E$ u; j2 U! }& Y4 G% t1 F
       可以通过了解目标受众及其浏览器使用情况来改进这些方面。如果你知道你的目标受众和他们使用的浏览器,你可以确保你的延迟加载的实现更适合那些浏览器版本。这将减少对不受支持的浏览器包含 polyfill 的需要,因为已经知道需要关注哪些浏览器。当你有一个异常值(不支持的浏览器),图片可以直接加载没有任何延迟或延迟。如果你对受众有很好的了解,那么这些异常值的数量将可以忽略不计。
) u6 U) D8 U! E, N6 t       这种方法将有助于使用性能良好的实现库,通过忽略浏览器异常将库大小保持在最小值,并支持目标用户的浏览器版本。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2025-10-7 07:37

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表