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 :)

Rohit Agrawal · Accepted Answer · 2013-05-16T10:21:48.917

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

edited May 16 '13 at 10:21

answered May 16 '13 at 10:15

Rohit Agrawal

5,372
5
19
30

in this case.. what is my src = to . I have data.html for what I am loading – diskrim May 16 '13 at 10:26
you have to extract them out using `$('img').each(function(){$(this).attr('src');})` – Rohit Agrawal May 16 '13 at 10:28
So, I need to first collect the data.html, run a .each then load the data when each image is loaded... can you show me how to adapt this to my code. I am lost. Where do I run this each statement. does it know to take from data.html without stating it? – diskrim May 16 '13 at 10:33
basically what i am telling is pre-loading images using jQuery and then adding – Rohit Agrawal May 16 '13 at 10:34
can get help from here http://stackoverflow.com/questions/1674932/preload-images-from-an-ajax-call?rq=1 – Rohit Agrawal May 16 '13 at 10:35
so something liek this : var images = $('img').each(function(){$(this).attr('src');}) $('')[0].src = images; – diskrim May 16 '13 at 10:35
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/30050/discussion-between-rohit-agrawal-and-diskrim) – Rohit Agrawal May 16 '13 at 10:43

Preload Images on ajax request

1 Answers1