加载img图片百分比

发表于 |

首先在html中图片要用img标签，div的background在这里不适用，接着就是加载img图片，根据图片加载状态来计算百分比：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var jiazai = 0;
var imgs = document.getElementsByTagName("img");
var imgLen = imgs.length;
for(var i = 0; i < imgLen; i++){
    if(imgs[i].complete){    //如果缓存里有这张图片，就是触发complete
        jiazai++;
        var baifenbi = Math.floor(jiazai/imgLen*100);
        setBaiNum(baifenbi);
        continue;
    }
    imgs[i].onload = function(){    //图片加载
        jiazai++;
        var baifenbi = Math.floor(jiazai/imgLen*100);
        setBaiNum(baifenbi);        
    }
}
function setBaiNum(bai){
    $("#baifen_txt").text(bai);   //设置百分数到DOM上
    if(bai == 100){		//图片加载完毕
        setTimeout(function(){
          //  显示视图;
        }, 1000);
        
    }
}