加載類中的所有圖像

當我將每次刷新時輸出的圖像打印到控制檯時，我加載了共享相同類的52個圖像。加載類中的所有圖像

期望的輸出是加載每圖像的類，因爲我試圖用進度條跟蹤進度，然後顯示圖像庫。

var thumbs = document.getElementsByClassName("thumbImg"); 
var thumbTotal = thumbs.length; 
console.log("number of thumbImg's = ", thumbTotal); 

$(".thumbImg").on("load", function() { 
    console.log("the following has loaded = ",this); 
});

這將輸出以下顯示隨機數量的圖像加載。

來源

2016-03-08 esd

不知道這是否有幫助，但getElementsByClassName返回一個「活」節點列表。這意味着它實際上並沒有在getElementsByClassName調用點查詢節點。它每次查詢調用返回的節點列表時都會查詢。這允許您始終擁有一個節點列表，該節點列表表示與類名稱匹配的當前節點，即使在初始調用後添加了新節點。嘗試將getElementsByClass名稱更改爲querySelectorAll（「theClassName」）。 –

可能是由於瀏覽器緩存。您可以嘗試檢查每個圖像的.complete屬性，並在已完成的情況下立即運行代碼。

$(".thumbImg").each(function(i, el) { 
    if (el.complete) { 
    handler.call(el); 
    } else { 
    $(el).on("load", handler); 
    } 
}) 

function handler() { 
    console.log("the following has loaded = ",this); 
}

來源

2016-03-08 02:41:29

謝謝，我沒有想過瀏覽器緩存。豎起大拇指！ – esd

不客氣。 – 2016-03-08 03:10:27

加載類中的所有圖像

回答

相關問題