Question

我有一个包含标签页的页面。每个选项卡都由jQuery .load()函数加载。

我想显示一个加载动画，当所有ajax请求都完成时，它会消失。但是，document.ready()只给我带来了有限的成功。

如何在执行代码之前确保完成所有ajax请求以隐藏加载动画？

Answer 1

.ajaxStop(handler)

此处的文档： http://api.jquery.com/ajaxStop/

Answer 2

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

Answer 3

ajaxComplete

根据文件：

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

Answer 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';
}

Answer 5

基本上，我几乎有类似的问题，我想在完成加载2个组合框之后加载网格，最后我想加载一个网格，所以我解决了这个问题

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

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

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

    $(document).ready(function () {
        LoadDropbox1();
        LoadDropbox2();
    });

    var Executed = false;

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

Answer 6

看看这篇文章并回答...... https://stackoverflow.com/a/13090589/999958

对我来说有用的解决方法：查看每个.complete（...）;

中的ajaxCallComplete（）调用

$(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(); });
};

希望可以帮助......

Answer 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();

}

所有ajax .load（）请求完成后执行函数

7 个答案: