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

[Richard14]

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

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

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

[kkocdko]

先白屏，过一段时间没加载完成再显示 loading ？

[Chad0000]

关闭 loading 前判断一下时间，不够时间就拖一会儿再关。比如至少 0.5 秒。

[Richard14]

@Chad0000 所以从闪一下改为一直显示吗。。是我没想到的思路。。

[christin]

promise.all 全部成功了再取消 loading

[Chad0000]

@Richard14
对。人为造成加载需要一定时间的假象。

[noahhhh]

加个透明度变化的遮罩？

[ragnaroks]

要么延迟显示，国外网站常见，处于加载过程中一定时间之后才显示加载动画；要么默认显示并给一个最低显示时间，可以在 onLoad 中 setTimeout

[yaojin]

一共 3 个 promise 运行, 一个 promise 是最低的等待时间, 超过这个时间返回失败的 promise, 例如 100 毫秒, 另一个是你请求的 promise, 还有一个 promise 是最长时间等待 promise, 用 promise.race 让请求 promise 和最低时间 promise 抢跑, 如果请求少于最低时长,那也需要最低时长才能成功, 否则 catch 再 promise.all 让最长和请求都完成才返回成功, 这样就不会有出现闪烁的情况了, 而且也保证了最低时长和请求刚好大于 1 毫秒的尴尬局面

[LLaMA2]

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]

https://baiyun.me/improve-the-user-experience-for-react-apps

[WhateverYouLike]

关于延迟 loading 的结束时间，我曾尝试过一个方案：loading 动画是由 CSS animation infinite 驱动的。当拿到响应时，不立即取消 loading ，也不立即关闭 animation ，而是等到 animation iteration 的时候再取消动画，这样可以保证动画总是在完整的周期更替时结束。

[tanranran]

骨架屏了解一下

[shabbyin]

antd 的 loading 本身是有防闪烁的吧我记得

[dfkjgklfdjg]

我觉得骨架屏不是 OP 想要解决的问题点，按我的理解是想要解决 loading 组件的闪白（即进入 loading 的瞬间就触发退出 loading 的事件)。
可以考虑完整播放一次 loading 动画后再 FadeOut 。