这是一个创建于 1166 天前的主题，其中的信息可能已经有所发展或是发生改变。
业务上后端要若干秒给前端准备资源，然后网页才能使用。希望达到的效果是，前端请求 html 页面里本身就包含了这个 loading 界面，它的成本很低，可以直接播放载入动画。
然后等到页面实际上具备功能了，标志事件可能是某资源加载成功，或者某请求的回文中得到了确认。这时候就把 loading 界面消去。目前一个问题是如果默认首屏显示 loading 的话，后端有时候资源有缓存，可以瞬间确认可以使用的状态，这时候前端的 loading 就会闪烁后消失，看起来非常 low （并且通常 loading 为了不做的太硬，会加一些渐变消失动画之类的，导致消失的过程也挺明显的。。）
大家有啥好办法解决类似情况吗
 | 1 kkocdko 2022-08-06 07:50:26 +08:00 via Android 先白屏，过一段时间没加载完成再显示 loading ？ |
 | 2 ktqFDx9m2Bvfq3y4 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 |
| 5 ktqFDx9m2Bvfq3y4 2022-08-06 08:35:53 +08:00 @Richard14 对。人为造成加载需要一定时间的假象。 |
 | 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  2 一共 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 94 2022-08-08 09:10:13 +08:00 我觉得骨架屏不是 OP 想要解决的问题点，按我的理解是想要解决 loading 组件的闪白（即进入 loading 的瞬间就触发退出 loading 的事件)。 可以考虑完整播放一次 loading 动画后再 FadeOut 。 |
Select Language