网页加载进度条

随着HTML5的普及，各种CSS3动画及JS特效在网页中层出不穷，PC端载入数据的速度还算可以，移动端相对要慢很多，如果图片或脚本没有完全载入，用户在操作中可能会发生各种问题，因此我们需要对数据载入进行侦测，以更加人性化的方式给用户展现。

下面介绍两种方法：

1。利用定时器：（此方法能解决一部分问题，但是只是静态的死数据）代码如下：

html；

<div class="loading">
<div class="pic"></div>
</div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507884218035&di=fc650620d09dc36e53c6c72ee89f568b&imgtype=0&src=http%3A%2F%2Fpic40.nipic.com%2F20140427%2F12086026_095431637332_2.jpg"/>

css样式：

.loading{ width:100%; height:100%;top:0; left:0; position:fixed; z-index:100; background:#fff;}
.pic{ width:50px; height:50px; background:url(../images/loading.gif); position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;}

jquery :

<script>
$(function(){

setInterval(function(){
 
$(".loading").fadeOut()
},3000)
})
</script>

第二种方法（可以解决百分之八十的问题）是通过加载状态

结构和样式和上面一样，但是jquery不一样：

<script>
document.onreadystatechange=function(){
console.log(document.readyState);
if(document.readyState=="complete"){
$(".loading").fadeOut()
}
}
</script>

其中document.onreadystatechange的意思是：页面加载状态改变时的状态

ocument.readyState的意思是：返回文档加载状态

加载状态有以下几种：