网页加载进度条
加载状态时间制作进度条
document.onreadystatechange 网页加载状态改变时的事件
document.readyState 返回当前文档的状态
返回的4种状态
1.uninitialized 还未开始载入
2.loading 载入中
3.interative 已加载，文档与用户可以开始交互
4.complete 载入完成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.loading{
white-space: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: #FFFFFF;
}
.loading .pic{
width: 64px;
height: 64px;
background: url(img/89.gif);
position:absolute;
top: 0;
bottom: 0;
left: 600px;
right: 0;
margin: auto ;
}
</style>
</head>
<body>
<div class="loading">
<div class="pic">
</div>
</div>
</body>
</html>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
/*当加载好了就直接关闭元素*/
document.onreadystatechange=function(){
if(document.readyState=="complete"){
$(".loading").fadeOut();
}
};
</script>
出处 https://www.imooc.com/video/15271
