所有ajax .load（）请求完成后执行函数
我有一个页面，有一个标签集。 每个选项卡都由jQuery .load()函数加载。
我想显示一个加载动画，当所有的ajax请求都完成时，它会消失。 但是， document.ready()只给我带来了有限的成功。
在执行代码隐藏加载动画之前，如何确保完成所有ajax请求？
.ajaxStop(handler)
文档： http ： //api.jquery.com/ajaxStop/
ajaxComplete
根据文件：
$('.log').ajaxComplete(function() { $(this).text('Triggered ajaxComplete handler.'); });
$(document).ready(function () { $(document).ajaxComplete(function () { alert('Completed'); }); });
将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'; }
基本上，我有几乎相似的这个问题，我想在完成加载2个combobox后加载网格，最后我想加载一个网格，所以我解决了这个问题
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; }); });
看看这篇文章并回答…… 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(); }); };
希望可以帮助……
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(); }