JQuery - 如何找到所有的圖像是否從Ajax響應中加載

Question

我通過ajax調用更新了一些html內容，以及在加載了所有來自ajax響應的圖像後，如何執行一個函數。

請參閱下面的代碼，#gridWrapper來自Ajax響應，它有很多縮略圖。

success: function(Data){ 
MyGrid.prepGridLayout(Data.html); 
$('#gridWrapper .thumbnail img').load(function(index) { 
    MyGrid.updateCellWidth(this); 
}); 
MyGrid.adjustGridWidth(); 
MyGrid.animateGridLayout(); 
} 

我只有在加載完所有圖像後才需要執行MyGrid.animateGridLayout();。目前MyGrid.updateCellWidth(this);執行

如何確保MyGrid.animateGridLayout();運行所有圖像加載只有前後MyGrid.animateGridLayout();執行？

Answer 1

你可以讓「加載」處理程序記錄他們已經完成了多少次。

success: function(Data){ 
    MyGrid.prepGridLayout(Data.html); 
    var thumbs = $('#gridWrapper .thumbnail img'), tc = 0; 
    thumbs.load(function(index) { 
    MyGrid.updateCellWidth(this); 
    if (++tc === thumbs.length) { 
     MyGrid.adjustGridWidth(); 
     MyGrid.animateGridLayout(); 
    } 
    }); 
}