怎么让页面loading效果显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么让页面loading效果显示相关的知识，希望对你有一定的参考价值。
使用setTimeout延迟执行代码，假设这是你要测试的执行函数 todo()$(\'.loading\').show();
setTimeout(todo(),5000)
function todo()
$(\'.loading\').hide();
//to do something...
参考技术A 提供一个思路：
<body> 顶部放一个 position:fixed 的 loading 遮罩，覆盖整个页面。
然后用 js 在 onload 事件里把这个遮罩隐藏掉就行了。
<html>
<head>
<title>Test</title>
<style>
.loading
position:fixed;
width:100%;
height:100%;
</style>
</head>
<body>
<div class="loading">Loading</div>
<div>下面放要放的内容</div>
<script>
window.onload=function()
$(".loading").fadeOut();
</script>
</body>
</html>
vue实战之狗血事件：页面loading效果诡异之事
接上回
想加一个切换路由时，跳出一个loading动画 ，路由加载后就消失
先做了一个loading提示的浮动层的组件，全局注册，在几个路由页面都引入
在vuex里面维护一个变量比如isLoading:false，用于是否显示loading组件
在loading组件中以computed方式自动依赖这个变量
在路由的beforeEach里面：
router.beforeEach((to,from,next)=>
store.commit(‘setLoading‘,true) next()
});
路由加载后，就设为false (注意,afterEach里面没有next)
router.afterEach((to,from) =>{ store.commit(‘setLoading‘,false) });
测试了一下，很奇怪，有时可以显示loading，有时不显示
用浏览器vue开发插件查看vuex变量isLoading，有时不变有时变
但每次切换路由都能控制台打印出消息
由于今天用的是08年的狗血笔记本，真特么 狗血笔记本出狗血事件，装win7运行特慢，编译也慢，
切换vscode竟然也要几秒，蠢货sublime竟然莫名其秒老是占满cpu
折腾了2小时，突然想到，把next()放在定时器里面，延迟500ms
没想到竟然可以了，猜测是next()执行下一个路由太快了
导致isLoading变量显示太快，loading动画来不及闪
以上是关于怎么让页面loading效果显示的主要内容，如果未能解决你的问题，请参考以下文章