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