前端实现百分比进度条

版权声明：如需转载，请注明来源 https://blog.csdn.net/qq_28073073/article/details/86640200

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

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

    <script>
        $(function () {
            //可使用jquery动态添加遮罩及loading效果
            // var loading = '<div class="loading"><div class="pic"></div></div>';
            //$("body").append(loading);
            //启动一个定时器
            setInterval(function(){
                $(".loading").fadeOut();//3秒之后影藏
            },3000)
        })

2.  通过加载状态事件制作进度条

• 1.document.onredystatechange 页面加载状态改变时的事件
• 2.document.readyState 返回当前文档的状态
• • 1.uninitialized 还未开始载入
• • 2.loading 载入中
• • 3.interactive 已加载,文档与用户可以开始交互
• • 4.complete 载入完成 

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

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

 欢迎评论