Preload Images on ajax request

Question

I am running a script which loads images and data from a ajax request and then displays it in my Blocksit gallery (a jquery plugin for a masonary gallery). The problem divs are being created before the images a actually loaded so they do not place correctly on the gallery. I need to somehow hold the data, load it, then run the function to display the gallery. I have tried using a setTimout, but no luck there obviously. here is my code:

("#loadMore").click(function(){
    $.ajax({
        url: "loadMore.php",
        data: {count: count,
               type: type},
        type: "POST",
        success: function(html){
            var data = jQuery.parseJSON(html);
            if (data.html == "stop"){

            }
            else{
                setTimeout(function() {
                    $('#container').append(data.html);
                    $('#container').BlocksIt({
                        numOfCol: 3,
                        offsetX: 5,
                        offsetY: 5
                    });


                }, 2000);
                $('html, body').animate({ scrollTop: $(document).height()-$(window).height() }, 500, "linear");
                count = $(".grid").length;
            }          
        }
    });
});

Any help is greatly appreciated :)

Answer 1

try using following steps -

create dom

$('<img/>')[0].src = /* ur url */;

then run code onLoad event

$('img').load(function(){
 // your code 
});

actually browser is smart enough that until the data is not added in dom it doesn't load ..... it doesnt even matter how much time u set for time out , so try creating dom and then on load of img insert it in right place