js 实现 网页加载进度条
日期: 2017-07-17 浏览量: 2679
要实现网页加载进度条,方法有很多。网上有些方法使用的是定时器,这种方法是个误区不推荐使用。这里简单介绍下通过加载状态时间制作进度条
知识点
document.onreadystatechange 页面加载状态改变时的事件
document.readyState 返回当前文档状态
readyState 存在几种状态 :
1. uninitialized //还未开始载入
2. loading //载入中
3. interactive //已加载
4. complete //载入完成
案例 1
使用 gif 小图片 实现页面加载进度显示 (分享一个网站获取各种gif图片 https://preloaders.net)
<style>
.loading{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:999;
background:#FFF;
}
.loading .pic{
width:64px;
height:64px;
background:url('/web/img/loading.gif');
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
</style>
<divclass="loading">
<divclass="pic"></div>
</div>
<scriptsrc="/web/js/zepto.js"> </script>
<script>
document.onreadystatechange= function(){
console.log(document.readyState);
if(document.readyState=='complete'){
$(".loading").hide();
}
}
</script>
人活着,其实就是一种心态,你若觉得快乐,幸福无处不在;你为自己悲鸣,世界必将灰暗。
阅读排行
最新文章
联系方式
- 邮箱:m18811126599@163.com
- QQ:896956692