JQuery - Как узнать, все ли изображения загружены из ответа Ajax

Question

Я обновляю содержимое div с помощью некоторого html через вызов ajax, и я хочу выполнить функцию после загрузки всех изображений из ответа 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

Вы могли бы иметь обработчики "load", чтобы отслеживать, сколько они сделали.

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();
    }
   });
}