常用的网页加载进度条

随着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 //提高进度条的优先层级，避免被其他层遮挡 
}

 
页头部分
 
 
 
左侧内容 
 
 
 
右边侧栏 
 
 
 
页脚部分 
 
 

可以看出，每加载一个节点后，jQuery调用animate()动画方法实现进度条宽度的变化，每个节点变化以50毫秒时间让进度条看起来更流畅些，最终从0%变化到100%，完成了进度条的进度动画。
当进度条达到100%后，页面加载完成，最后还有一步要做的就是隐藏进度条。

三 实时获取加载数据的进度条

通过获取到静态资源的个数 和 已 load 静态资源的 百分数来实现 进度条

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;
    }