제목 : 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




저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩