JQuery - Ajax 응답에서 모든 이미지가로드되는지 확인하는 방법

Question

I는 ajax 호출을 통해 div 컨텐츠를 일부 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.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(); 
    } 
    }); 
}