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 => {

    // 全部图片加载完成

  })