V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
cbais7890

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

  •  
  •   cbais7890 · 3 days ago · 1171 views

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

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

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

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

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

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

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

    4 replies    2026-05-03 17:39:13 +08:00
    Wcowin
        1
    Wcowin  
       3 days ago
    不错呀
    lozzow
        2
    lozzow  
       2 days ago
    打开图片会闪闪烁啊
    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
        3
    cbais7890  
    OP
       2 days ago
    @lozzow #2 感谢反馈, 可以试试关掉 cover.objectFit, cover.clip, cover.radius 这些属性试试?
    目前看可能是这几个属性会增加浏览器合成/渲染压力, 导致渲染频闪, 我调整一下首次加载的优化, 应该可以解决这个问题
    cbais7890
        4
    cbais7890  
    OP
       2 days ago
    @lozzow #2 修复好了, 确实是显示时预热图片压力过大, 导致浏览器合成层的抖动
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   808 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 50ms · UTC 22:23 · PVG 06:23 · LAX 15:23 · JFK 18:23
    ♥ Do have faith in what you're doing.