这是一个创建于 840 天前的主题，其中的信息可能已经有所发展或是发生改变。
业务上后端要若干秒给前端准备资源，然后网页才能使用。希望达到的效果是，前端请求 html 页面里本身就包含了这个 loading 界面，它的成本很低，可以直接播放载入动画。
然后等到页面实际上具备功能了，标志事件可能是某资源加载成功，或者某请求的回文中得到了确认。这时候就把 loading 界面消去。目前一个问题是如果默认首屏显示 loading 的话，后端有时候资源有缓存，可以瞬间确认可以使用的状态，这时候前端的 loading 就会闪烁后消失，看起来非常 low （并且通常 loading 为了不做的太硬，会加一些渐变消失动画之类的，导致消失的过程也挺明显的。。）
大家有啥好办法解决类似情况吗
 |
1
kkocdko 2022-08-06 07:50:26 +08:00 via Android
先白屏，过一段时间没加载完成再显示 loading ？
|
 |
2
Chad0000 2022-08-06 07:55:14 +08:00 via iPhone
关闭 loading 前判断一下时间，不够时间就拖一会儿再关。比如至少 0.5 秒。
|
 |
4
christin 2022-08-06 08:32:14 +08:00 via iPhone
promise.all 全部成功了再取消 loading
|
 |
6
noahhhh 2022-08-06 08:36:36 +08:00 via Android
加个透明度变化的遮罩？
|
 |
7
ragnaroks 2022-08-06 08:38:46 +08:00
要么延迟显示，国外网站常见，处于加载过程中一定时间之后才显示加载动画；要么默认显示并给一个最低显示时间，可以在 onLoad 中 setTimeout
|
 |
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 毫秒的尴尬局面
|
 |
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 连 |
 |
10
baiyun 2022-08-06 11:54:45 +08:00 via iPhone 1
|
 |
11
WhateverYouLike 2022-08-06 13:15:17 +08:00 via Android 2
关于延迟 loading 的结束时间，我曾尝试过一个方案：loading 动画是由 CSS animation infinite 驱动的。当拿到响应时，不立即取消 loading ，也不立即关闭 animation ，而是等到 animation iteration 的时候再取消动画，这样可以保证动画总是在完整的周期更替时结束。
|
 |
12
tanranran 2022-08-06 16:04:23 +08:00
骨架屏了解一下
|
 |
13
shabbyin 2022-08-07 19:09:29 +08:00 via iPhone
antd 的 loading 本身是有防闪烁的吧我记得
|
 |
14
dfkjgklfdjg 2022-08-08 09:10:13 +08:00
我觉得骨架屏不是 OP 想要解决的问题点，按我的理解是想要解决 loading 组件的闪白（即进入 loading 的瞬间就触发退出 loading 的事件)。
可以考虑完整播放一次 loading 动画后再 FadeOut 。 |
Select Language