1

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?

Community
  • 1
  • 1
Greg
  • 7,782
  • 7
  • 43
  • 69
  • Ok, so you load IMG's over Ajax (meaning, the src is provided and the browser downloads it). If you want to do what you seem to be describing, you will need to manage each with a target and a `setInterval()` that is checked on each Ajax response and the completion of the IMG loads (that you are handling, as well). – Jared Farrish May 27 '11 at 23:47
  • @George Cummins - No, it isn't. His was a generic 'page-loaded' question. I'm talking about an event for a specific xhr call. – Greg May 27 '11 at 23:47
  • Images are not AJAX content. The tags that lead to the images being retrieved are your AJAX content. – Lightness Races in Orbit May 27 '11 at 23:53
  • I understand that, but I think you still understand my question, no? I mean it's right in the title -- I'm looking for a $(window).load equivalent for xhr. – Greg May 27 '11 at 23:55
  • @Greg: No need to be snarky! Repeating yourself won't help. :) (And, yes, I do.) – Lightness Races in Orbit May 28 '11 at 00:02
  • try rephrasing your question if people are having trouble understanding it, rather than blaming them for not reading your mind. This question is pretty vague, and I think both the answers below answer it as stated. – Ian May 28 '11 at 00:16
  • @Ian: FWIW I think the question is actually pretty clear, but I can see how it may not be immediately apparent to some. – Lightness Races in Orbit May 28 '11 at 00:17
  • @Ian: I'm not sure how I could have possibly been any clearer. I know how to run a callback when a specific ajax call is completed and I'm fully aware of the ajax event handlers. I expressed pretty clearly that I'm not concerned with the state of the DOM, but looking for a specific event when the browser has finished loading all the new content -- which is exactly what $(window).load is for. So, it really isn't my fault you don't understand what $(window).load does, even after I linked to its docs and a full explanation. – Greg May 28 '11 at 00:19

1 Answers1

2

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);
});
Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055