JQuery - 如何查找是否从Ajax响应加载所有图像

Question

我通过ajax调用用一些html更新div内容，以及在加载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.animateGridLayout();在执行MyGrid.updateCellWidth(this);之前执行

如何确保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();
    }
   });
}