V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Richard14
V2EX  ›  问与答

前端的等待加载界面,有什么防止闪烁的好办法吗?

  •  
  •   Richard14 · 2022-08-06 07:07:43 +08:00 · 2342 次点击
    这是一个创建于 865 天前的主题,其中的信息可能已经有所发展或是发生改变。

    业务上后端要若干秒给前端准备资源,然后网页才能使用。希望达到的效果是,前端请求 html 页面里本身就包含了这个 loading 界面,它的成本很低,可以直接播放载入动画。

    然后等到页面实际上具备功能了,标志事件可能是某资源加载成功,或者某请求的回文中得到了确认。这时候就把 loading 界面消去。目前一个问题是如果默认首屏显示 loading 的话,后端有时候资源有缓存,可以瞬间确认可以使用的状态,这时候前端的 loading 就会闪烁后消失,看起来非常 low (并且通常 loading 为了不做的太硬,会加一些渐变消失动画之类的,导致消失的过程也挺明显的。。)

    大家有啥好办法解决类似情况吗

    14 条回复    2022-08-08 09:10:13 +08:00
    kkocdko
        1
    kkocdko  
       2022-08-06 07:50:26 +08:00 via Android
    先白屏,过一段时间没加载完成再显示 loading ?
    Chad0000
        2
    Chad0000  
       2022-08-06 07:55:14 +08:00 via iPhone
    关闭 loading 前判断一下时间,不够时间就拖一会儿再关。比如至少 0.5 秒。
    Richard14
        3
    Richard14  
    OP
       2022-08-06 08:23:48 +08:00
    @Chad0000 所以从闪一下改为一直显示吗。。是我没想到的思路。。
    christin
        4
    christin  
       2022-08-06 08:32:14 +08:00 via iPhone
    promise.all 全部成功了再取消 loading
    Chad0000
        5
    Chad0000  
       2022-08-06 08:35:53 +08:00
    @Richard14
    对。人为造成加载需要一定时间的假象。
    noahhhh
        6
    noahhhh  
       2022-08-06 08:36:36 +08:00 via Android
    加个透明度变化的遮罩?
    ragnaroks
        7
    ragnaroks  
       2022-08-06 08:38:46 +08:00
    要么延迟显示,国外网站常见,处于加载过程中一定时间之后才显示加载动画;要么默认显示并给一个最低显示时间,可以在 onLoad 中 setTimeout
    yaojin
        8
    yaojin  
       2022-08-06 09:49:19 +08:00   ❤️ 1
    一共 3 个 promise 运行, 一个 promise 是最低的等待时间, 超过这个时间返回失败的 promise, 例如 100 毫秒, 另一个是你请求的 promise, 还有一个 promise 是最长时间等待 promise, 用 promise.race 让请求 promise 和最低时间 promise 抢跑, 如果请求少于最低时长,那也需要最低时长才能成功, 否则 catch 再 promise.all 让最长和请求都完成才返回成功, 这样就不会有出现闪烁的情况了, 而且也保证了最低时长和请求刚好大于 1 毫秒的尴尬局面
    LLaMA2
        9
    LLaMA2  
       2022-08-06 11:50:54 +08:00
    1 、loading 的动画样式很重要,早期苹果那种菊花个人不喜欢,现在很多 App 的自定义动画很和谐,
    2 、2 楼说的进如页面显示,结束请求 fade out 你要实现后看看能否满足
    3 、我以前做的时候是进入页面就显示 Loading ,不过这个 Loading 是 Fade in 的,而且前 0.2S 左右是透明的,0.2S 后才慢慢显现出来,如果从 cache 取,0.2S 内完成,直接 dismiss ,不做 Fade out 。这样给人的感觉是没有 Loding 动画,其实有,只是他是透明的。超过 0.2S 后就真的显示,直到请求返回后 Fade out 。这里的 0.2S 你征求设计师的以前,他期望多久就多久,这样没有闪烁了。
    4 、点赞投币 3 连
    baiyun
        10
    baiyun  
       2022-08-06 11:54:45 +08:00 via iPhone   ❤️ 1
    WhateverYouLike
        11
    WhateverYouLike  
       2022-08-06 13:15:17 +08:00 via Android   ❤️ 2
    关于延迟 loading 的结束时间,我曾尝试过一个方案:loading 动画是由 CSS animation infinite 驱动的。当拿到响应时,不立即取消 loading ,也不立即关闭 animation ,而是等到 animation iteration 的时候再取消动画,这样可以保证动画总是在完整的周期更替时结束。
    tanranran
        12
    tanranran  
       2022-08-06 16:04:23 +08:00
    骨架屏了解一下
    shabbyin
        13
    shabbyin  
       2022-08-07 19:09:29 +08:00 via iPhone
    antd 的 loading 本身是有防闪烁的吧我记得
    dfkjgklfdjg
        14
    dfkjgklfdjg  
       2022-08-08 09:10:13 +08:00
    我觉得骨架屏不是 OP 想要解决的问题点,按我的理解是想要解决 loading 组件的闪白(即进入 loading 的瞬间就触发退出 loading 的事件)。
    可以考虑完整播放一次 loading 动画后再 FadeOut 。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3048 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 13:57 · PVG 21:57 · LAX 05:57 · JFK 08:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.