當新圖片加載時運行JavaScript

Question

我對這個問題做了一些研究，但是我的情況很奇怪。我寫了一個函數來使用ajax來獲取一些圖像資源並將其存儲在js中的一個變量中。 window.onload（）在第一次工作正常，它會在顯示之前將所有圖像加載到變量中，但之後我單擊了一個鏈接以再次使用ajax將更多圖片加載到該變量，我不知道如何顯示這些新圖片只有當它們完全存儲在該變量中時。請幫助我。 謝謝，戴。

Answer 1

單個圖像的加載可以通過img.onload進行跟蹤。所以，如果你加載了一大堆圖像，並且想知道它們何時全部加載，那麼必須在所有圖像上加載onload處理程序，並在所有加載時累計計數。

var loadCnt = 0; 
function cntLoads() { 
    ++loadCnt; 
    if (loadCnt > 20) { 
     // all images loaded now, do whatever you want to do here 
    } 

} 

var img1 = new Image(); 
img1.onload = cntLoads; 
img1.src "xxxx"; 

var img2 = new Image(); 
img2.onload = cntLoads; 
img2.src "yyyyy"; 

....