兄弟们， vue 网页有没有办法实现页面首页加载超过 1 秒才显示 loading， 1 秒内就不显示 loading 吗

[dafuyang]

目前我采用的是常规的实现方式，在还 vue 没渲染的时候显示 loading ，挂载渲染后隐藏 loading ，首次效果不错，但是后续浏览器有缓存了，在加载很快的情况下，loading 的显示就会闪一下，感觉不是很爽，有办法实现我标题中的这种需求吗。。

[makelove]

我就是这么用的，实现没用 js ，用的是 css animation 就有的延迟动画 1s 功能

[yamedie]

我会选择用 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});

[yamedie]

噢，没注意审题，想在 vue 运行时还没加载时就开始计时并显示 loading ，应该在 html 的 head 里尽早加载独立的 script 来控制骨架屏的显隐吧

[justdoit123]

强制至少 loading X 秒的体验会好一点，效果稳定。比如，至少 loading 0.3 秒，如果 0.3 秒后页面还没准备好，那就继续 loading 。

[darknoll]

vue 没渲染的时候显示 loading ，是怎么整的？

[kealm]

这个叫 grace time 。一般的处理方式是：1. 增加一个延迟 2. 增加最短展示时间。
延迟时间内不显示 loading ，如果延迟时间内加载完毕，直接进入。如果延迟时间内没有加载完毕，显示 loading ，时间是 MIN(最短展示时间，实际时间）。

[kealm]

@kealm MIN => MAX

[dreamn]

试试渐变显示 loading ，渐变退出 loading 的方案呢？
这样视觉上就是不是闪烁效果了.....

[rrZ2C]

设置至少 loading 1 秒

[flyingghost]

进页展示一个透明 1s 后渐入 100%的动画 loading 。

[4771314]

这个确定不是 yy 的需求或者老板的需求？
听起来不怎么靠谱

[YouTing]

请求速度快的时候出现 loading ，而较快时不出现。月经问题了，淘宝在用 setTimeout ，缺点是一秒左右的 loading 体验不好，0.9 秒没有 loading ，1.1 秒 loading 一闪而过

[likunyan]

都被你们玩花了，该显示就显示，不显示就不要显示。

[jorneyr]

underscore 的 throttle 函数可以处理这个问题。

[296727]

。。。。一个 css 的 transiton 不就可以了，还要这么折腾

[sanmaozhao]

这题我做过。
分析一下题目：
>> 在还 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;

[sanmaozhao]

fadeIntLoading 不小心多打了个 t ，不过不影响功能

[loolac]

loading 添加渐显过渡动画，超过 1s 才全部显示出来，小于 1s 就是没全部显示就渐隐了

[jeffwcx]

这个一般放到 html 里面做，不放在 vue 里面做

[sanmaozhao]

写了个样例，直接就有效果

https://codepen.io/sanmao/pen/eYKwLRv