Detect when resources loaded via ajax

Question

I recently asked how to detect when all resources of a page have been loaded, such as images and stylesheets. The answer came back, use the $(window).load(); method in jQuery.

My question now is how do I detect when content is done loading via AJAX. AJAX injects some img elements, say, into the DOM... how can I tell when those images have finished loading?

Answer 1

In the $.get() or $.post() function, you can supply the name of a function that will be called when the ajax request has completed. For example:

$.get("something.php",{data:'test'},foo);

function foo()
{
   // This function will be called when the request has completed
}

Or:

$.get("something.php",{data:'test'},function()
  {
    //This function will be called in the same way
  }

);

Answer 2

Detecting when an ajax fetch is easy: use the Ajax Events defined in jQuery: http://docs.jquery.com/Ajax

But I'm not sure you are asking the same thing. To detect when an image finishes loading (presumably, this will be equal to an event when the image's src attribute is changed), you can use mutation events. http://wiki.github.com/jollytoad/jquery.mutation-events cheers,

jrh.

Answer 3

If you are calling $.ajax you can have a set a callback function for a successful request:

$.ajax({
    url: _url,
    type: _type,
    data: _data,
    dataType: _dataType,
    success: _success
})

var _success = function(result) {
    $html = $(result);
    alert('HTML downloaded');

    // inject HTML into DOM here
}

You'll need to go through $html to get the image elements and for each of those images register the load function callback which fires when an image had loaded:

$('#myImage').load(function() {  
    alert('Image Loaded');  
});