【onload】js判断单张、多张图片加载完成

方法一：原生js

// 单张图片加载完成
let imgTag = new Image() //创建img标签
imgTag.src = 'https://t7.baidu.com/it/u=1744157654,1808520583&fm=193&f=GIF'
imgTag.onload=function(){ 
    console.log('图片加载完成才会执行的回调')
}
// 多张图片加载完成
let imgList = [
    {id:0,src:'https://t7.baidu.com/it/u=1744157654,1808520583&fm=193&f=GIF'},
    {id:1,src:'https://img1.baidu.com/it/u=2788818474,2047444862&fm=26&fmt=auto'},
    {id:2,src:'https://img0.baidu.com/it/u=770046254,637068900&fm=26&fmt=auto'},
]
let imgTags = [] //img所有标签
let loadNum = 0 //加载完成的图片数
let imgTotal = imgList.length //所有图片的个数
for(var i = 0;i<imgTotal;i++){
    let imgTag = imgTags[i]
    imgTag=new Image()
    imgTag.src = imgList[i]
    imgTag.onload=function(){
        loadNum++
        if(loadNum==imgTotal){
            // 所有图片加载完成
        }
    }
}

方法二： 结合Promise

// 单张图片
new Promise((resolve,reject)=>{
    let imgTag = new Image() //创建img标签
    imgTag.src = 'https://t7.baidu.com/it/u=1744157654,1808520583&fm=193&f=GIF'
    imgTag.onload=function(){ 
        console.log('图片加载完成才会执行的回调')
        resolve(logo)
    } 
}).then(logo=>{
    //加载完成之后的逻辑
})
// 多张图片
let imgList = [
    {id:0,src:'https://t7.baidu.com/it/u=1744157654,1808520583&fm=193&f=GIF'},
    {id:1,src:'https://img1.baidu.com/it/u=2788818474,2047444862&fm=26&fmt=auto'},
    {id:2,src:'https://img0.baidu.com/it/u=770046254,637068900&fm=26&fmt=auto'},
]
let imgTags = [] //img所有标签
let imgTotal = imgList.length //所有图片的个数
// let loadNum = 0 //加载完成的图片数
let promiseAll=[]
for(var i = 0;i<imgTotal;i++){
    promiseAll[i] =  new Promise((resolve,reject)=>{
                        let imgTag = imgTags[i]
                        imgTag=new Image()
                        imgTag.src = imgList[i]
                        imgTag.onload=function(){
                            resolve(imgTag)
                        }
    })
}
Promise.all(promiseAll).then(imgTag=>{
    //加载完成后要做的逻辑
})