如何確定頁面中的N個圖片都已經加載完成，并且確定了在頁面中的尺寸？

我們做的一款Web App，其中會從后臺獲取DOM結構（包在一個section元素里），然后append到一個container div下面。
之后，需要計算一下新加進來的section的尺寸信息。
我們發(fā)現，一旦這個section里含有一些img元素，就會導致append后，馬上計算尺寸，拿到的數據是不準確的。
我們已經用過Mutation Observer來監(jiān)控container下的元素變化，延后了計算時間。但是這個方法無法解決圖片的問題。

請問，我們怎么抓住這樣一個時點：所有圖片都已加載完畢，并且之后不會再影響頁面的布局。

多謝各位大神。

回答

編輯回答

朕略萌

這是預加載的處理，

var imgLoad = function (url, callback) {
        var img = new Image();
         img.src = url; 
       if (img.complete) {
          callback(img.width, img.height);
       }  else {
         img.onload = function () { 
             callback(img.width, img.height);
             img.onload = null; 
          }
        }

2018年4月10日 17:53

編輯回答

莓森

唔，有個小問題，確定這個尺寸的目的是啥

2017年4月22日 15:04

編輯回答

涼薄

如果要判斷所有圖片已加載，那么有兩個方法：

偵聽所有圖片的 load 事件（或 onload='')
定時遍歷圖片，檢查它們的 naturalWidth 屬性

2017年9月20日 03:14

編輯回答

冷眸

建議，獲取數據之后，先把所有圖片做一個預加載，然后再 append到 dom中。
這樣的預加載實現方式根據運行環(huán)境的不同有很多，這里簡單示意（利用promsie）：

function _loadImage(item) {
  return new Promise((resolve, reject) => {
    var image = new Image();
    image.onload = () => {
      resolve();
    };
    image.onerror = err => {
      resolve();
    };
    image.src = item.src;
  });
}
function loadeImages(imgs) {
  const tasks = imgs.map(img => _loadImage(img));
  return Promise.all(tasks);
}
loadeImages(imgList).then(() => {
    // append to div
})

2017年5月28日 12:12

編輯回答

心沉

效果圖

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>

<body style="background:#eee">
    <script>
     const images = [
        "https://avatar-static.segmentfault.com/102/500/1025005915-54cb538538eea_small",
        "https://static.segmentfault.com/v-5b8f9b7e/global/img/user-64.png",
     ];
     Promise.all(
        images.map(url=>new Promise((resolve,reject)=>{
            const img = new Image();
            img.addEventListener("load",function(){
                // 增加自定義屬性表明加載成功了沒有
                this.__isOK__ = true;
                resolve(this);
            },{once:true})
            img.addEventListener("error",function(){
                this.__isOK__ = false;
                resolve(this);
            },{once:true});
            
            img.src = url;
        }))
     ).then(arr=>{
        const success = arr.filter(img=>img.__isOK__);
        console.log(`加載完畢。共加載了${arr.length}張圖片。其中成功了${success.length}張。`)
        console.log(`成功的圖片的尺寸分別為:\n${success.map(img=>`寬${img.naturalWidth}，高${img.naturalHeight}`).join("\n")}`);
     })
    </script>
</body>
</html>

2017年7月18日 13:26

編輯回答