目前我采用的是常规的实现方式，在还 vue 没渲染的时候显示 loading ，挂载渲染后隐藏 loading ，首次效果不错，但是后续浏览器有缓存了，在加载很快的情况下，loading 的显示就会闪一下，感觉不是很爽，有办法实现我标题中的这种需求吗。。
› Vue.js
This topic created in 1426 days ago, the information mentioned may be changed or developed.
 |
tf2Dec 13, 2022
1
强行假装 1 秒再展示即可。
|
 |
renmuDec 13, 2022 via Android
3
全屏 loading 的话可以强行多看几秒 loading
|
 |
rabbbitDec 13, 2022
4
const timeoutId = setTimeout(() => this.loading = true, 1000)
try { const res = await getResource() } catch(err) { console.log(err) } this.loading = false clearTimeout(timeoutId) |
 |
horseInBlackDec 13, 2022
5
骨架屏 / v-cloak
|
 |
vaceDec 13, 2022
6
如果你的 loading 在实例中的话，可以用 defineAsyncComponent 定义一个入口的异步组件，在 loader 里面加载数据和其他组件，用 delay 控制 loadingComponent 的展示时机。
|
 |
SQLExceptionDec 13, 2022
7
记一下平均耗时？超过一定范围才渲染 loading
|
 |
anguiaoDec 13, 2022
8
强行显示 1 秒的 loading 呗，不然还有啥办法呢？毕竟你不能预知要加载多久啊😂
|
 |
9
@SQLException 咋判断时间呢，我题目就是问这个的意思。。
|
|
SQLExceptionDec 13, 2022
10
@dafuyang #9 https://juejin.cn/post/6844903569900978189
参考这个？不是让你算现在这个页面加载多久再决定是否开启 loading 是让你算前面几个页面的平均值，小于一定值就禁用 loading |
 |
darkengineDec 14, 2022
11
在 index.html 的 head 元素里用 js script 脚本设置个 1 秒的 timeout ，到了再显示 loading 。当在 vue 加载出来时判断这个 timeout 在不，如果在的话（加载时间小于 1 秒）取消掉。
|
 |
12
刚好 1.1 秒加载完成呢，loading 不还是一闪而过吗，所以问题不在这
|
8 |
lightyisuDec 14, 2022
13
以前好像做过但是没用判断不出来 contentloaded 时间 伪 1S 感觉在浪费时间尽管人感受不出来速度。所以感觉没必要折腾完美。
|
 |
14
300ms 内没加载完才显示 loading ，如果显示 loading ，至少显示 1s
|
 |
MrHydeDec 14, 2022
15
1s 已经够久的了
|
 |
huijieweiDec 14, 2022
16
我是强制显示 1 秒的 loading 。。
|
 |
17
antd 的 Spin 就是这种设计, 但是我觉得, 直接展示 loading,至少展示 300ms 的逻辑更简单
|
 |
18
直接显示加载指示器，给这个组件加上 1 秒的 opacity 从 0 到 100% 的 transtion
|
 |
cangcangDec 14, 2022
19
让你的 loading 延迟一秒展示
|
 |
SmiteChowDec 14, 2022
20
谁喜欢看 loading 啊，一闪而过代表网速性能好，是正反馈啊。
|
 |
makeloveDec 14, 2022
21
我就是这么用的，实现没用 js ，用的是 css animation 就有的延迟动画 1s 功能
|
 |
yamedieDec 14, 2022 via Android
22
我会选择用 Promise.race ，好处是省得手动 set 和 clear 定时器（也不用去比对 Date.now()），逻辑也更清晰一点儿。
const sleep = time => new Promise(resolve => setTimeout(resolve, time)); let isLoading = false; const promiseSleep = sleep(1000); const promiseAjax = fetch(xxx).then(res => {xxxx 业务逻辑; return true}).finally(() => {isLoading = false}); Promise.race([promiseSleep, promiseAjax]).then(res => {if (!res) isLoading = true}); |
|
yamedieDec 14, 2022 via Android
23
噢，没注意审题，想在 vue 运行时还没加载时就开始计时并显示 loading ，应该在 html 的 head 里尽早加载独立的 script 来控制骨架屏的显隐吧
|
 |
justdoit123Dec 14, 2022
24
强制至少 loading X 秒的体验会好一点，效果稳定。比如，至少 loading 0.3 秒，如果 0.3 秒后页面还没准备好，那就继续 loading 。
|
 |
darknollDec 14, 2022
25
vue 没渲染的时候显示 loading ，是怎么整的？
|
 |
26
这个叫 grace time 。一般的处理方式是：1. 增加一个延迟 2. 增加最短展示时间。
延迟时间内不显示 loading ，如果延迟时间内加载完毕，直接进入。如果延迟时间内没有加载完毕，显示 loading ，时间是 MIN(最短展示时间，实际时间）。 |
 |
dreamnDec 14, 2022
28
试试渐变显示 loading ，渐变退出 loading 的方案呢？
这样视觉上就是不是闪烁效果了..... |
 |
rrZ2CDec 14, 2022
29
设置至少 loading 1 秒
|
 |
flyingghostDec 14, 2022
30
进页展示一个透明 1s 后渐入 100%的动画 loading 。
|
 |
4771314Dec 14, 2022
31
这个确定不是 yy 的需求或者老板的需求？
听起来不怎么靠谱 |
 |
YouTingDec 14, 2022
32
请求速度快的时候出现 loading ，而较快时不出现。月经问题了，淘宝在用 setTimeout ，缺点是一秒左右的 loading 体验不好，0.9 秒没有 loading ，1.1 秒 loading 一闪而过
|
 |
QKgf555H87Fp0cthDec 14, 2022
33
都被你们玩花了，该显示就显示，不显示就不要显示。
|
 |
jorneyrDec 14, 2022
34
underscore 的 throttle 函数可以处理这个问题。
|
 |
296727Dec 14, 2022
35
。。。。一个 css 的 transiton 不就可以了，还要这么折腾
|
 |
sanmaozhaoDec 14, 2022
36
这题我做过。
分析一下题目： >> 在还 vue 没渲染的时候显示 loading ，挂载渲染后隐藏 loading 这一条，把 loading 界面放到 vue 实例挂在的 DOM 元素里面就行了，挂载后组件渲染出来的 DOM 会替换原本的内容 >> 首页加载超过 1 秒才显示 loading ，1 秒内就不显示 loading 给上一条的 loading 界面加个 css 样式，透明度为 0 ，所以开始时看不到这个 loading 界面 然后再加个 css animation ，1s 后把透明度变为 1 ，所以这时就能看到了 样例代码： @keyframes fadeIntLoading { from { opacity: 0; } to { opacity: 1; } } animation: fadeIntLoading 0.1s linear 1s forwards; opacity: 0; |
|
sanmaozhaoDec 14, 2022
37
fadeIntLoading 不小心多打了个 t ，不过不影响功能
|
 |
loolacDec 14, 2022
38
loading 添加渐显过渡动画，超过 1s 才全部显示出来，小于 1s 就是没全部显示就渐隐了
|
 |
jeffwcxDec 14, 2022
39
这个一般放到 html 里面做，不放在 vue 里面做
|
|
sanmaozhaoDec 14, 2022
40
|
 |
isbaseDec 14, 2022
41
|
 |
bitkuang8Dec 14, 2022
42
这样行的不...
```js // 初始 loading 为 false let timer = setTimeout(() => { loading = true }, 1000) // 在 App.vue 的 mounted 钩子中 loading = false // 假设加载资源已经超过 1s ，在挂载完成时取消 loading clearInterval(loading) // 假设 1s 内已经挂载完成，取消 loading ``` |
 |
leonPuckDec 14, 2022
43
如果用了 RxJS ， 也可以实现，https://juejin.cn/post/7176943529057321017
|
 |
raolightDec 14, 2022
44
不就普通的延时 Loading 么？
都是差不多的思路，一般是设置延迟 2~3 秒显示 Loading ，如果期间数据还没加载完，那就继续显示 Loading ； 如果 2~3 秒内已经加载完了，就取消 Loading |
 |
KetteironDec 14, 2022
45
js 文件本身的加载时间是未知的，所以任何 js 层面的处理都达不到你想要的效果。如果这个误差你能接受，那随便挑一个方法都行。
|
 |
grewerDec 14, 2022
46
关键词: setTimeout
|
 |
ActraceDec 14, 2022
47
试试用 tmpUI 做真加载进度
https://github.com/tmplink/tmpUI |
 |
thulofDec 14, 2022
48
特意登陆来回复你一下：
把 Loading 写在 HTML 模版中，页面开始加载时 setTimeout 计时一秒开始展示 Loading DOM 在 Vue 的初始化逻辑中加载完成时 remove 掉 Loading DOM 即可 |
 |
gengliangcaisDec 15, 2022
49
/** 秒级响应不再显示 loading 弹窗 */
const delay = 1000 let timeoutId = setTimeout(() => { if (loading) { timeoutId = 0; // showLoading() } }, delay); // 响应里面 if(timeoutId==0){ closeLoading() } |
|
50
@darkengine
@yfugibr @ragnaroks @kealm @dreamn @flyingghost @rrZ2C @YouTing @296727 @sanmaozhao @sanmaozhao @raolight @grewer @thulof 兄弟们，感谢大家的意见！！！这段时间梯子挂了，上不来。。综合试了一下，js settimeout 或者是动画延迟执行在加上渐变过渡都可以满足俺的需求，再次谢谢各位！！ |
 |
humbassJan 14, 2023
52
本质上应该有 4 个状态：
0 - 未知状态 - 按楼主的意思相当于是白屏，或者显示骨架页内容 1 - 有缓存数据，准备加载数据 2 - 没有缓存，显示 loading 3 - 数据已装载 1 和 3 合并也可以 不关 setTimeout 什么事，如果要用到 延时，说明只写了两个状态 |
Select Language