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

[dafuyang]

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

[isbase]

这个看起来和你说的异曲同工，https://baiyun.me/improve-the-user-experience-for-react-apps

[bitkuang8]

这样行的不...

```js
// 初始 loading 为 false

let timer = setTimeout(() => {
loading = true
}, 1000)

// 在 App.vue 的 mounted 钩子中
loading = false // 假设加载资源已经超过 1s ，在挂载完成时取消 loading

clearInterval(loading) // 假设 1s 内已经挂载完成，取消 loading
```

[leonPuck]

如果用了 RxJS ， 也可以实现，https://juejin.cn/post/7176943529057321017

[raolight]

不就普通的延时 Loading 么？

都是差不多的思路，一般是设置延迟 2~3 秒显示 Loading ，如果期间数据还没加载完，那就继续显示 Loading ；

如果 2~3 秒内已经加载完了，就取消 Loading

[dssxzuxc]

js 文件本身的加载时间是未知的，所以任何 js 层面的处理都达不到你想要的效果。如果这个误差你能接受，那随便挑一个方法都行。

[grewer]

关键词: setTimeout

[Actrace]

试试用 tmpUI 做真加载进度
https://github.com/tmplink/tmpUI

[thulof]

特意登陆来回复你一下：
把 Loading 写在 HTML 模版中，页面开始加载时 setTimeout 计时一秒开始展示 Loading DOM
在 Vue 的初始化逻辑中加载完成时 remove 掉 Loading DOM 即可

[gengliangcais]

/** 秒级响应不再显示 loading 弹窗 */
const delay = 1000
let timeoutId = setTimeout(() => {
if (loading) {
timeoutId = 0;
//
showLoading()
}
}, delay);

// 响应里面
if(timeoutId==0){
closeLoading()
}

[dafuyang]

@darkengine
@yfugibr
@ragnaroks
@kealm
@dreamn
@flyingghost
@rrZ2C
@YouTing
@296727
@sanmaozhao
@sanmaozhao
@raolight
@grewer
@thulof
兄弟们，感谢大家的意见！！！这段时间梯子挂了，上不来。。综合试了一下，js settimeout 或者是动画延迟执行在加上渐变过渡都可以满足俺的需求，再次谢谢各位！！

[lynan]

@darknoll 把 loading 写在 #app 里，vue 初始化以后会替换 #app 的节点内容

[humbass]

本质上应该有 4 个状态：

0 - 未知状态 - 按楼主的意思相当于是白屏，或者显示骨架页内容
1 - 有缓存数据，准备加载数据
2 - 没有缓存，显示 loading
3 - 数据已装载

1 和 3 合并也可以

不关 setTimeout 什么事，如果要用到 延时，说明只写了两个状态