开源自荐: 翻新了一个 9 年前开源的 React 图片查看器

5 月 2 日
 cbais7890

最近借助 AI, 把 9 年前写的 react-zmage 翻新了一遍

查看器支持让页面里的普通 点击后从原位展开成全屏查看器, 支持多图、键盘和移动端手势

丝滑效果比肩 iOS 首页的图标打开动画

博客、门户站、文档、富文本里那种 "点图看大图" 的场景应该会比较合适

官网： https://zmage.caldis.me/ GitHub： https://github.com/Caldis/react-zmage

动画细节花了不少时间处理, 整个官网也翻新了, 增加了丰富的示例和 Playground, 欢迎实际点点看和 star/fork ，按你们自己的项目定制

btw: 按住 Shift 打开/关闭有个小彩蛋

1590 次点击
所在节点    分享创造
4 条回复
Wcowin
5 月 3 日
不错呀
lozzow
5 月 3 日
打开图片会闪闪烁啊
Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Mobile/15E148 Safari/604.1
cbais7890
5 月 3 日
@lozzow #2 感谢反馈, 可以试试关掉 cover.objectFit, cover.clip, cover.radius 这些属性试试?
目前看可能是这几个属性会增加浏览器合成/渲染压力, 导致渲染频闪, 我调整一下首次加载的优化, 应该可以解决这个问题
cbais7890
5 月 3 日
@lozzow #2 修复好了, 确实是显示时预热图片压力过大, 导致浏览器合成层的抖动

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.ih06.com/t/1210027

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX