做相册、做图库、做电商详情页，还有文章里塞一堆配图，都绕不开一个交互，就是用户点一下缩略图，图片全屏放大，可以左右翻、可以捏合缩放。这个体验看着简单，真做起来手写也不轻松，尤其是手机上的手势、惯性滑动、多点触控，各种边界情况特别多。这次整理了 4 款开源免费、可商用的图片灯箱查看器库，从极轻量到功能齐全都有，挑一个装进项目里，图片预览这块就不用自己操心了。
四款库的差别
PhotoSwipe 是移动端体验的标杆，双指缩放、拖拽、滑动切换、键盘导航都做得很顺，动画跟手。要留意的是它的 v5 版本是纯 ESM 模块，得配合 photoswipe-lightbox 一起用。GLightbox 是上手最简单的一款，给链接加个 class 就能变成灯箱，图片、视频、iframe 都支持，自带响应式布局和画廊分组。Viewer.js 功能最全，缩放、旋转、翻转、拖拽、裁剪预览、缩略图导航都有，提供 UMD 和 ESM 两种构建，老项目新项目都能用。BigPicture 只有几 KB，点开就是全屏大图，适合只想要点开看大图这个最简功能的场景。
手机端体验这块
图片查看器最考验的其实是手机端。桌面端鼠标点点，用哪款差别不明显，一旦到手机上，双指缩放跟不跟手、滑到边缘会不会卡住、快速切换会不会白屏，差距一下就出来了。要做得精致，优先考虑 PhotoSwipe；要求不高、能开能关就行，GLightbox 或者 BigPicture 完全够用。另外提一句，图片本身建议压缩到合理体积再上，再好的查看器也扛不住一张几 MB 的原图，加载和缩放都会拖后腿。
包内容和用法
压缩包按库名分成了四个目录，每个目录里放构建产物和对应的样式文件。大多数是 UMD 构建，直接用 script 标签引入即可；PhotoSwipe 目录里放的是 ESM 构建，需要用 module 的方式引入，文件后缀也标注清楚了，别搞混。每个目录附带了说明文档和许可文件，基础用法、常用参数都写了。四款库互相独立，按项目需要选一款引入就行，不用全装。
图片预览是个细节活，做好了用户觉得理所当然，做差了体验直接打折。与其每次重新踩一遍手势和兼容性的坑，不如挑一款成熟库收进工具箱。这个包体积很小，加起来两百 KB 出头，对项目几乎没有负担。四款库全部是 MIT 协议，可免费商用、修改和再分发，保留各自的许可文件即可。后面还会整理前端开发常用的组件合集，需要的可以关注收藏。
暂无评论内容