控制loading

最新推荐文章于 2021-09-10 18:49:00 发布

yingzhi3104

最新推荐文章于 2021-09-10 18:49:00 发布

阅读量283

点赞数

分类专栏： h5工具文章标签： loading

本文链接：https://blog.csdn.net/yingzhi3104/article/details/78729265

版权

h5工具专栏收录该内容

7 篇文章 0 订阅

订阅专栏

loading加载的太快，看不到loading的效果

function rate(cb, delay = 400, count = 100){
   const time = delay / count;
   let num = 0;
   const call = function (){
     num += 1;
     if(cb)cb(num, count);
     setTimeout(() => {
       if(num < count){
         call();
       }
     }, time);
   };
   call();
 }
var proArr = [[0,0],[0,0]];
function progress(index, loaded, total){
   proArr[index][0] = loaded;
   proArr[index][1] = total;
   let percent = 0,top=0,bottom=0;//分子，分母
   proArr.forEach((item) => {
     top += item[0]
     bottom += item[1];
   });
   percent = Math.floor(top/ bottom * 100) ;

        let timeStatus = 0;

        if(isNaN(percent)){
            percent = 0;
        }

//这里写loading页的变化   
     View.loading.$dom.find('.text').html(`${percent}% `);
if(percent === 100){
   //加载完成
}


   }

    rate((loaded,total)=>{
        progress(0,loaded,total)
    },400,100);

    View.loading.preload( (loaded, total)=>{
        progress(1,loaded,total);
    });

//加载图片
    preload(cb){
        var $img = $("img");
        var loaded = 0;
        var total = $img.length;
        $img.each(function(i){
            if(this.complete){
                loaded++;
                cb(loaded, total);
            }else{
                this.onload = function(){
                    loaded++;
                    cb(loaded, total);
                    this.onload = null;
                }
            }
        });
        if(!total){
            cb(loaded, total);
        }
    }

背景图片闪动

这个方法主要加载html页面的图片，一些背景图片写在css中，不包括在加载的范围，导致在苹果手机上显示延迟，闪动等，

解决办法：
在body中加上这些背景图片，但隐藏

//纯css的loading
<body>
<img src="resources/img/popup_bg.png" style="display: none;">
</body>

loading页的图片闪动

loading页面如果用到了图片，在网速太慢的情况下，图片可能会闪一下才出现，

优化方案：
在loading页面前再加一个纯css的loading，
把loading页面的图片放到最前面，延迟一点时间才显示
或者在css的loading的页面加载图片，项目的loading页面用js的settimeout等控制显示loading的效果

<div class="loading2">
            <div class="loader4"></div>
        </div>

.loading2{
     width: 100%;
     height: 100%;
     text-align: center;
     padding-top: 40%;
/*loader4*/

.loader4 {
    /*width: 45px;
    height: 45px;*/
    width: 50px;
    height: 50px;
    display: inline-block;
    padding: 0px;
    border-radius: 100%;
    border: 5px solid;
    border-top-color: rgba(246, 36, 89, 1);
    /*border-bottom-color:rgba(0,0,0, 0.1);*/
    border-bottom-color: transparent;
    border-left-color: rgba(246, 36, 89, 1);
    border-right-color: transparent;
    /*border-right-color:rgba(0,0,0, 0.1);*/
    -webkit-animation: loader4 1s ease-in-out infinite;
    animation: loader4 1s ease-in-out infinite;
}

@keyframes loader4 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes loader4 {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
}