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

[cbais7890]

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

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

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

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

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

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

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

[Wcowin]

不错呀

[lozzow]

打开图片会闪闪烁啊
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]

@lozzow #2 感谢反馈, 可以试试关掉 cover.objectFit, cover.clip, cover.radius 这些属性试试?
目前看可能是这几个属性会增加浏览器合成/渲染压力, 导致渲染频闪, 我调整一下首次加载的优化, 应该可以解决这个问题

[cbais7890]

@lozzow #2 修复好了, 确实是显示时预热图片压力过大, 导致浏览器合成层的抖动