Execute function after all ajax .load() requests are finished

Question

I have a page that has a tab set. Each of the tabs is loaded by the jQuery .load() function.

I want to display a loading animation that disappears when all of the ajax requests are finished. However, document.ready() has only provided me with limited success.

How can I ensure that all ajax requests are completed before executing the code to hide the loading animation?

Answer 1

.ajaxStop(handler)

Documentation here: http://api.jquery.com/ajaxStop/

Answer 2

$(document).ready(function () {
     $(document).ajaxComplete(function () {
         alert('Completed');
     });
});

Answer 3

ajaxComplete

Per the documentation:

$('.log').ajaxComplete(function() {
    $(this).text('Triggered ajaxComplete handler.');
});

Answer 4

Use the callback argument to .load(), setting a flag or increasing a counter in the callback function. Once all flags are set or the counter reaches the number of tabs, you know all tabs have been loaded, and you can remove the animation.

In pseudocode that might or might not be valid JavaScript:

loadedTabs = 0;

function onLoad() {
    for (int i = 0; i < numTabs; ++i) {
        tabs[i].load(tabUrl(i), tabLoaded);
    }
}

function tabLoaded() {
    ++loadedTabs;
    if (loadedTabs == numTabs)
        loadingAnimation.display = 'none';
}