jquery ajax 후 이미지 로딩이 완료된 후 append 할수 있는 함수
제목 : jquery ajax 후 이미지 로딩이 완료된 후 append 할수 있는 함수
소스 :
// Fn to allow an event to fire after all images are loaded
$.fn.imagesLoaded = function () {
// Edit: in strict mode, the var keyword is needed
var $imgs = this.find('img[src!=""]');
// if there's no images, just return an already resolved promise
if (!$imgs.length) {return $.Deferred().resolve().promise();}
// for each image, add a deferred object to the array which resolves when the image is loaded (or if loading fails)
var dfds = [];
$imgs.each(function(){
var dfd = $.Deferred();
dfds.push(dfd);
var img = new Image();
img.onload = function(){dfd.resolve();}
img.onerror = function(){dfd.resolve();}
img.src = this.src;
});
// return a master promise object which will resolve when all the deferred objects have resolved
// IE - when all the images are loaded
return $.when.apply($,dfds);
}
function receiveMessage(){
$.ajax({
url : "/m/common/exec_getMainGoodsList.asp",
data : "page=" + i + "&cate=<%=cate%>&listtype=<%=listtype%>",
error : function(html, status){
//alert(html+'오류입니다.');
},
success : function(html, status){
i += 1;
if (html == 'no_data')
{
//alert('더이상 상품이 존재하지않습니다.');
} else {
var $items = $(html);
$items.imagesLoaded().then(function(){
$(".cont_list").append($items).masonry('appended',$items);
});
}
}
});
}
내용 :
예제 소스 파일 :
출처 : http://stackoverflow.com/questions/4774746/jquery-ajax-wait-until-all-images-are-loaded