js图片预加载loading进度条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//预加载图片
let imgList = ["1.png","2.png","3.png","4.png","5.png"];
let i = 0 //当前加载进度的索引
function loadingImg(){
    //当前进度
    let proess = i / imgList.length
    console.log(`${parseInt(proess*100)}%`); //当前完成百分比
    //图片加载
    let img = new Image();
    img.src = `./images/${imgList[i]}`;
    if(i < imgList.length){
        i++;
        img.onload = function(){
            loadingImg()
        }
    }else{
        console.log("加载完成")
    }
}
loadingImg()
//预加载结束