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]
});