前端实现百分比进度条

随着html5的普及，各种css3动画及js特效在网页中也是层出不穷，PC端加载数据的速度还是比较快的，但是对于移动端设备而言则相对要慢不少，如果图片或者脚本没有加载完，用户在操作中就可能发生各种问题，因此我们需要对数据加载进行侦测，以更加人性化的方法将网页程序内容展现给用户，实现更佳的用户体验。

1.定时器实现进度条
优点:解决大部分加载进度问题
缺点:一旦有了缓存，定时器加载就变得鸡肋了

   

3.自定义页面需加载的图片数量来制作进度条
优点:自定义需要提前加载的图片，方便按需预加载，可以把背景图提前预加载，基本能满足80%的需求
缺点:需要通过js加载下图片

 //此方式还可以做懒加载使用，页面加载一部分，页面显示后加载其余部分

var imgSrcArr = [
    'img/1.png',
    'img/2.png',
     ......
];

var imgWrap = [];

function preloadImg(arr) {
    for(var i =0; i< arr.length ;i++) {
        imgWrap[i] = new Image();
        imgWrap[i].src = arr[i];
    }
}

preloadImg(imgSrcArr); 

 欢迎评论