Question

Possible Duplicate:
window.onload equivalent for Ajax applications?

I’m looking for some way of running a javascript function when all ajax content is fully loaded, including images, as opposed to just DOM-ready. Something like $(window).load().

Does jQuery allow this?

Answer 1

You’re looking for a combination of jQuery’s XHR event handlers (for when the <img> tag has been successfully inserted into the DOM), and a mechanism to detect when media themselves have been retrieved from the remote server.

There are at least two plugins you can use to perform the latter task. I suggest using them in combination with binding the required events from within the XHR event handler.

For example, with imagesLoaded, it’ll probably look something like this:

$.ajax("url", function(data) {
   var $html = $(data);
   $('img', $html).load(function(e) {
      // An image was retrieved
   });

   $('#targetContainer').append($html);
});