做长图文、商品列表、相册这类图片密集的页面，最怕的就是首屏打开慢。图片没加载完页面一直转圈，用户等上两秒多半就划走了。懒加载的思路是让图片先不加载，滚动到附近再加载，首屏速度立刻上一个台阶，用户没翻到的图也不白白浪费流量。这次整理了 3 款开源免费、可商用的图片懒加载库，体积都不大，接进现有项目也不费事。
三款库各自有什么特点
LazySizes 是功能最全的一款，除了图片还能懒加载 iframe、视频、背景图和区块内容，支持响应式图片自动选合适尺寸、低质量占位图先显示再替换，不用改现有 HTML 结构就能用，老项目改造很省事。lozad.js 基于 IntersectionObserver 接口实现，写法简单，体积很小，新项目用它最轻。vanilla-lazyload 也是纯原生实现，同时支持 IntersectionObserver 和滚动事件两种检测方式，对老浏览器兼容更好，还能配置提前加载的距离和失败重试。
懒加载为什么能提速
原理其实不复杂。图片的真实地址不放在 src 上，而是放在 data-src 里，页面加载时这些图根本不会被下载，等滚动到接近视口的位置，库再把地址换过去触发加载。这样一来首屏只需要下载用户看得到的那几张图，剩下的等用到再说。一个图片很多的列表页，首屏要下载的体积可能从几兆降到几百 K，打开速度的差别非常直观，移动端流量也省下来了。
实际用起来要注意什么
有几个细节容易踩坑。要记得给图片留位置，图没加载出来时位置是空的，页面会在加载过程中来回抖动，做法是给图片标好宽高或者放一张占位图。做响应式图片时，srcset 和 sizes 要配准确，否则可能给手机加载了桌面用的大图，反而更慢。首屏能看到的图建议别做懒加载，让它正常加载，不然后用户一进来先看到一片空白，体验并不好。
包内容和用法
压缩包里按库名分成了三个目录，每个目录放了压缩版和带注释的非压缩版两种文件，正式项目引 min 版，调试的时候看非压缩版。三款库互相独立、不依赖任何框架，用 script 标签引入就能用，常用配置项都写了注释。选型上按需挑就行，要响应式图片和多种内容类型用 LazySizes，想写得简洁用 lozad.js，要兼顾老浏览器就用 vanilla-lazyload。每个目录都附带了说明文档和许可文件。
懒加载属于性价比很高的优化，改动不大但效果立竿见影，图片越多的页面感受越明显。动手之前建议先看看页面上的图片是不是都用了合适的尺寸，很多页面慢其实不只是加载方式的问题，是图本身没压缩过，先把图压好再上懒加载，两个效果叠起来更明显。这三款加起来不到一百 K，按需引入几乎不占体积，全部可免费商用、修改和再分发，保留各自的许可文件即可。后面还会继续整理前端开发常用的组件和工具合集，需要的可以先收藏。
暂无评论内容