Выполнить функцию после завершения всех запросов ajax.load()

У меня есть страница с набором вкладок. Каждая вкладка загружается функцией jQuery .load().

Я хочу отображать анимацию загрузки, которая исчезает, когда все запросы ajax завершены. Однако document.ready() предоставил мне ограниченный успех.

Как я могу гарантировать, что все запросы ajax будут выполнены до выполнения кода, чтобы скрыть анимацию загрузки?

Ответы

Ответ 2

ajaxComplete

В документации:

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

Ответ 3

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

Ответ 4

Используйте аргумент callback для .load(), установив флаг или увеличив счетчик в функции обратного вызова. Когда все флаги установлены или счетчик достигает количества вкладок, вы знаете, что все вкладки загружены, и вы можете удалить анимацию.

В псевдокоде, который может быть или не быть действительным 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';
}

Ответ 5

В принципе, у меня почти аналогичная проблема, которую я хочу загрузить Grid после завершения загрузки 2 комбо-боксов, а в конце я хочу загрузить сетку, поэтому я решил так:

    function LoadGrid1()
    {
        //ajax1 load first dropbox
    }

    function LoadGrid2()
    {
        //ajax2 load Second dropbox
    }

    function LoadGrid()
    {
        //ajax3 load Grid after complete the two drops loading...
    }

    $(document).ready(function () {
        LoadGrid1();
        LoadGrid2();
    });

    var Executed = false;

    jQuery(function ($) {
        $(document).ajaxStop(function () {
            // Executed when all ajax requests are done.
            if (!Executed) LoadGrid();
            Executed = true;
        });
    });

Ответ 6

Посмотрите на эту запись и ответы... fooobar.com/questions/14553/...

Полезное обходное решение для меня: Посмотрите на вызов ajaxCallComplete() в каждом .complete(...);

$(document).ready(function(){
    loadPersons();
    loadCountries();
    loadCities();
});

// Define how many Ajax calls must be done
var ajaxCalls = 3;
var counter = 0;
var ajaxCallComplete = function() {
    counter++;
    if( counter >= ajaxCalls ) {
            // When all ajax calls has been done
        // Do something like hide waiting images, or any else function call
        $('*').css('cursor', 'auto');
    }
};

var loadPersons = function() {
        // Show waiting image, or something else
    $('*').css('cursor', 'wait');

    var url = global.ctx + '/loadPersons';
    $.getJSON(url, function(data) {
            // Fun things
    })
    .complete(function() { ajaxCallComplete(); });
};

var loadCountries = function() {
    // Do things
    var url = global.ctx + '/loadCountries';
    $.getJSON(url, function(data) {
            // Travels
    })
    .complete(function() { ajaxCallComplete(); });
};

var loadCities = function() {
    // Do things
    var url = global.ctx + '/loadCities';
    $.getJSON(url, function(data) {
            // Travels
    })
    .complete(function() { ajaxCallComplete(); });
};

Надежда может помочь...

Ответ 7

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);

function BeginRequestHandler(sender, args) {
    $modal.show();
    $overlay.show();
}

function EndRequestHandler(sender, args) {
    $modal.hide();
    $overlay.hide();

}