js 判断图片是否加载完成(使用 onload 事件)

我们在写 jquery 的时候一般都会写 $(document).ready，加载完成事件还有一个就是 onload

 

onload 与 ready 的区别是：

1、ready 是 DOM 加载完成的事件

2、onload 是所有内容加载完成(如：图片)

 

我们如果要判断某一块 div 中的内容是否完全加载完成可以通过 onload 事件。

同理，判断图片是否加载完成可以在 img 元素上绑定 onload 事件：

<img id="img">

　　

document.querySelector('#img').onload = function() {}

　　

 

如果需要判断多张图片，可以借助 Promise

let images = [
    '1.jpg',
    '2.jpg'
  ];
  let promiseAll = [], imgs = [], total = images.length;
  for (let i = 0; i < total; i++) {
    promiseAll[i] = new Promise((resolve, reject) => {
      imgs[i] = new Image();
      imgs[i].src = images[i];
      imgs[i].onload = function() {
        resolve(imgs[i]);
      };
    })
  }
  Promise.all(promiseAll).then(img => {
    // 全部图片加载完成
  })