javascript img onload（）

Question

我正在使用<img> onload函數在已加載的圖像上觸發調整大小操作。但是，我發現如果在一個網頁中有兩個或更多的<img> s具有相同的「src」，這意味着圖像是相同的，後面的<img>的onload（）函數將不會被調用。如何確保所有<img> s都適當調整大小，即使有一些<img> s具有相同的src？

謝謝。

Answer 1

這是因爲您的瀏覽器實際上緩存了第一張圖片。所以當你試圖再次加載相同的「src」時，它會被本地緩存，並且永遠不會觸發onload。要隨時加載它，可以在查詢字符串上附加一個唯一值。

Answer 2

而不是使用一個單獨的onload處理每個<img/>的，爲什麼不直接使用一個單一的onload事件爲window？此事件在之後觸發，所有內容（如所有圖片）都已加載，因此您可以僅使用該單個處理程序處理每個圖像。例如：

function processAllImages() 
{ 
    var imgElts = document.getElementsByTagName('img'); 
    for (var i=0; i<imgElts.length; i++) 
    { 
     processImage(imgElts[i]); // TODO write this function 
    } 
} 

window.onload = processAllImages; 

Answer 3

我之前問過類似的問題。
查看結果：Javascript/jQuery: How to detect img is fully downloaded or not?

總之，您可以使用img標記的'complete'屬性。
在綁定加載事件之前檢查它。