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 => {
    // 全部圖片加載完成
  })