酒浓码浓 - 前端判断图片加载完毕

前端判断图片加载完毕

首先普及一个技术点，img的onload事件及complete属性

前者为image加载完毕事件，后可以做回调

后者为image加载状态的属性，监听或在onload里打印也可以获取其是否加载完毕。

那么如下调用前者，用promise判断所有图片都加载好了再做事~

const arr = ["/static/img/123.png","/static/img/123.png"]
const callBack = ()=>{
   console.log("加载完毕做点啥吧")
}    
this.handleImgLoad(arr, callBack)



// 加载图片事件
handleImgLoad(arr, callBack){
   const brr = []
   arr.forEach((item, index)=>{
    brr[index] = new Promise((resolve, reject)=>{
        let imgReady = new Image
        imgReady.src = item
        imgReady.onload=()=>{
          resolve(index)
        }
    })
   })
   Promise.all(brr).then((result) => {
     if(result && callBack) callBack()
   }).catch((error) => {
     console.log("加载图片-----", error)
   })
},