随着HTML5的普及，各种CSS3动画及JS特效在网页中层出不穷，PC端载入数据的速度还算可以，移动端相对要慢很多，如果图片或脚本没有完全载入，用户在操作中可能会发生各种问题，因此我们需要对数据载入进行侦测，以更加人性化的方式给用户展现。
一 通过加载状态事件制作进度条
- onreadystatechange
当document文档正在加载时,返回"loading"。当文档结束渲染但在加载内嵌资源时，返回"interactive"，并引发DOMContentLoaded事件。当文档加载完成时,返回"complete"，并引发load事件
readystatechange事件会在document对象上的readyState属性的属性值发生变化时触发
document.onreadystatechange = function() {
if (document.readyState == 'complete') {
console.log('加载成功')
}
}
实例网站如下图：
image.png
二 定位在头部的进度条
- 通过html代码逐行加载的特性，在整页代码的若干个跳跃行数中设置节点，进行大概的模糊进度反馈来实现进度加载的效果。大致意思是：页面每加载到指定区域，则返回(n)%的进度结果，通过设置多个节点，来达到一步一步显示加载进度的目的。
.loading{
background:#FF6100; //设置进度条的颜色
height:5px; //设置进度条的高度
position:fixed; //设定进度条跟随屏幕滚动
top:0; //将进度条固定在页面顶部
z-index:99999 //提高进度条的优先层级，避免被其他层遮挡
}
<div id="header">
页头部分</div>
<script type="text/javascript">
$('.loading').animate({'width':'33%'},50);
//第一个进度节点
</script>
<div id="mainpage">
左侧内容
</div>
<script type="text/javascript">
$('.loading').animate({'width':'55%'},50);
//第二个进度节点
</script>
<div id="sider">
右边侧栏
</div>
<script type="text/javascript">
$('.loading').animate({'width':'80%'},50);
//第三个进度节点
</script>
<div id="footer">
页脚部分
</div>
<script type="text/javascript">
$('.loading').animate({'width':'100%'},50);
//第四个进度节点
</script>
可以看出，每加载一个节点后，jQuery调用animate()动画方法实现进度条宽度的变化，每个节点变化以50毫秒时间让进度条看起来更流畅些，最终从0%变化到100%，完成了进度条的进度动画。
当进度条达到100%后，页面加载完成，最后还有一步要做的就是隐藏进度条。
三 实时获取加载数据的进度条
通过获取到静态资源的个数 和 已 load 静态资源的 百分数来实现 进度条
<body>
<img src="http://a.hiphotos.baidu.com/image/pic/item/730e0cf3d7ca7bcb6a172486b2096b63f624a82f.jpg" />
<img src="http://h.hiphotos.baidu.com/image/pic/item/9345d688d43f8794bbd3d889de1b0ef41bd53a6c.jpg" />
<img src="http://h.hiphotos.baidu.com/image/pic/item/91529822720e0cf3b886be520646f21fbe09aa22.jpg" />
<img src="http://h.hiphotos.baidu.com/image/pic/item/b64543a98226cffc49721710b5014a90f603ea3c.jpg"/>
<img src="http://a.hiphotos.baidu.com/image/pic/item/dc54564e9258d1094b8c3d1add58ccbf6c814d2f.jpg"/>
<img src="http://h.hiphotos.baidu.com/image/pic/item/08f790529822720e2b0ddb5677cb0a46f31fab5e.jpg"/>
<img src="http://b.hiphotos.baidu.com/image/pic/item/eaf81a4c510fd9f98e1389c3292dd42a2834a410.jpg"/>
<img src="http://h.hiphotos.baidu.com/image/pic/item/18d8bc3eb13533faddede284a4d3fd1f40345bc4.jpg"/>
<img src="http://g.hiphotos.baidu.com/image/pic/item/d6ca7bcb0a46f21f50f321f8fa246b600d33ae52.jpg"/>
<img src="http://g.hiphotos.baidu.com/image/pic/item/d6ca7bcb0a46f21f50f321f8fa246b600d33ae52.jpg?1"/>
<img src="http://g.hiphotos.baidu.com/image/pic/item/d6ca7bcb0a46f21f50f321f8fa246b600d33ae52.jpg?2"/>
</body>
var img = document.getElementsByTagName('img');
var num = 0;
var imgarr = [];
for (var i = 0; i < img.length; i++) {
var oimg = new Image();
imgarr.push(oimg);
imgarr[i].onload = function() {
num++;
document.title = (parseInt(num / i * 100)+'%')
if (num == i) {
console.log('成功')
}
}
console.log(img[i].src)
imgarr[i].src = img[i].src;
}
