JS判斷圖片是否加載完成

我們經常需要獲取圖片的寬高，這需要在圖片加載完成後纔可以。

下面我就介紹幾種判斷圖片是否加載完成的方法：

首先我們先寫一個img標籤

<img src="./img.png" alt="">

1.complete屬性：

var imgNode = document.getElementsByTagName('img')[0];
var timer = setTimeout(function(){
   if(imgNode.complete){
      console.log('圖片加載完成')
    }
},20)

2.onload事件：

var imgNode = document.getElementsByTagName('img')[0];
imgNode.οnlοad=function(){
   console.log('圖片加載完成')
}

這裏我就介紹這兩種方式（兼容性好，推薦使用），像什麼jq方法、readystatechange事件我就不介紹了。

這裏我們來擴展一下，假如我們判斷多張圖片加載完成呢？

方法一、

var img = [];
var flag = 0;
var mulitImg = ['http://www.daqianduan.com/wp-content/uploads/2017/03/IMG_0119.jpg','http://www.daqianduan.com/wp-content/uploads/2017/01/1.jpg','http://www.daqianduan.com/wp-content/uploads/2015/11/jquery.jpg','http://www.daqianduan.com/wp-content/uploads/2015/10/maid.jpg'];
var imgTotal = mulitImg.length;  //圖片總數
for(var i = 0 ; i < imgTotal ; i++){
    img[i] = new Image()
    img[i].src = mulitImg[i]
    img[i].onload = function(){
      //document.getElementsByTagName('body')[0].appendChild(this)  
      // console.log(this.width)
      flag++;
      if( flag == imgTotal ){
         console.log('圖片全部加載完成')
      }
    }
 }

方法二、通過Promise實現

let mulitImg = [
  "http://www.daqianduan.com/wp-content/uploads/2017/03/IMG_0119.jpg",
  "http://www.daqianduan.com/wp-content/uploads/2017/01/1.jpg",
  "http://www.daqianduan.com/wp-content/uploads/2015/11/jquery.jpg",
  "http://www.daqianduan.com/wp-content/uploads/2015/10/maid.jpg"
];
let promiseAll = [];
let img = [];
let imgTotal = mulitImg.length;

for (let i = 0; i < imgTotal; i++) {
  promiseAll[i] = new Promise((resolve, reject) => {
    img[i] = new Image();
    img[i].src = mulitImg[i];
    img[i].onload = function() {
      resolve(this);
    };
  });
}
Promise.all(promiseAll).then(img => {
  console.log(img); // [img, img, img, img]
});