How can I know when the content imported via jQuery's .load() method are done completely loading?

Question

I'm working on a website concept that utilizes David DeSandro's jQuery Masonry plugin along with some code inspired by Paul Irish's Infinite Scroll plugin (I couldn't get the plugin to work so I wrote something similar myself). I've done the integration so the basic concept that I have does work.

I'm firing jQuery's .load() method when someone scrolls to the bottom of the page to load the next portion of the page. In the callback to the .load() call, I call the jQuery Masonry plugin to create the layout. The trouble is that my site is image heavy and jQuery Masonry can't do its thing without the images being loaded first.

So, how can I tell when the result of the .load() method is loaded so that I can then call jQuery Masonry.

My basic code looks something like this:

$("#page"+page).load(url+' #content', function() {
    var moreContent = $(this);
    $('#maincontent').append( moreContent ).masonry({ appendedContent: moreContent });      
});

All of the variables etc... resolve properly.

Thanks for the help.

Answer 1

The event triggered when all content (including images) are ready is the load event, so in this case it would be appropriate rather than the more-commonly used $.ready() method.

http://api.jquery.com/ready/ (information about the distinction between load and ready).