Javascript 多个ajax调用后页面加载图像

我给出了一个绑定到ajax启动/停止函数的加载图像，如下所示

$('#LoadingImage').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){ 
    $(this).hide();
});

现在我的页面上document.ready（）下有很多ajax调用。所以所有ajax调用都是同时开始的。但是ajax停止会根据ajax中的结果而变化。所以发生的是

加载图像显示，当一个ajax调用完成时，图像被隐藏并显示我的主屏幕。。有没有办法加载图像直到最后一个ajax调用完成

<script type="text/javascript">

$(document).ready(function () {

$('#LoadingImage').on('ajaxStart', function(){
        $(this).show();
}).on('ajaxStop', function(){   
        $(this).hide();

});

$.ajax({
                url: http:www.google.com(for example i gave this url),
                data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
                type: 'POST',
                dataType:"json",
                contentType: 'application/json',
                success: function(data) {  
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
                              //some code

error: function(data, status, jqXHR) {                       
                    alert('There was an error.');
                }

        }); // end $.ajax 


$.ajax({
                url: http:www.google.com(for example i gave this url),
                data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
                type: 'POST',
                dataType:"json",
                contentType: 'application/json',
                success: function(data) {  
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
                              //some code

error: function(data, status, jqXHR) {                       
                    alert('There was an error.');
                }

            }); // end $.ajax 
$.ajax({
                url: http:www.google.com(for example i gave this url),
                data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
                type: 'POST',
                dataType:"json",
                contentType: 'application/json',
                success: function(data) {  
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
                              //some code

error: function(data, status, jqXHR) {                       
                    alert('There was an error.');
                }

            }); // end $.ajax 
$.ajax({
                url: http:www.google.com(for example i gave this url),
                data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
                type: 'POST',
                dataType:"json",
                contentType: 'application/json',
                success: function(data) {  
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
                              //some code

error: function(data, status, jqXHR) {                       
                    alert('There was an error.');
                }

            }); // end $.ajax 

$.ajax({
                url: http:www.google.com(for example i gave this url),
                data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
                type: 'POST',
                dataType:"json",
                contentType: 'application/json',
                success: function(data) {  
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
                              //some code

error: function(data, status, jqXHR) {                       
                    alert('There was an error.');
                }

            }); // end $.ajax 

$（文档）.ready（函数（）{
$（'#LoadingImage'）。在（'ajaxStart'，function（）上{
$（this.show（）；
}).on（'ajaxStop'，函数（）{
$（this.hide（）；
});
$.ajax({
url:http:www.google.com（例如我给出了这个url），
数据：JSON.stringify（{login:{“loginid”：userid，“reqType”：“R”}），
键入：“POST”，
数据类型：“json”，
contentType:'应用程序/json'，
成功：函数（数据）{
$.each（data.GetRejectedRequestsMethodResult，函数（key，val）{
//一些代码
错误：函数（数据、状态、jqXHR）{
警报（“发生错误”）；
}
})；//end$.ajax
$.ajax({
url:http:www.google.com（例如我给出了这个url），
数据：JSON.stringify（{login:{“loginid”：userid，“reqType”：“R”}），
键入：“POST”，
数据类型：“json”，
contentType:'应用程序/json'，
成功：函数（数据）{
$.each（data.GetRejectedRequestsMethodResult，函数（key，val）{
//一些代码
错误：函数（数据、状态、jqXHR）{
警报（“发生错误”）；
}
})；//end$.ajax
$.ajax({
url:http:www.google.com（例如我给出了这个url），
数据：JSON.stringify（{login:{“loginid”：userid，“reqType”：“R”}），
键入：“POST”，
数据类型：“json”，
contentType:'应用程序/json'，
成功：函数（数据）{
$.each（data.GetRejectedRequestsMethodResult，函数（key，val）{
//一些代码
错误：函数（数据、状态、jqXHR）{
警报（“发生错误”）；
}
})；//end$.ajax
$.ajax({
url:http:www.google.com（例如我给出了这个url），
数据：JSON.stringify（{login:{“loginid”：userid，“reqType”：“R”}），
键入：“POST”，
数据类型：“json”，
contentType:'应用程序/json'，
成功：函数（数据）{
$.each（data.GetRejectedRequestsMethodResult，函数（key，val）{
//一些代码
错误：函数（数据、状态、jqXHR）{
警报（“发生错误”）；
}
})；//end$.ajax
$.ajax({
url:http:www.google.com（例如我给出了这个url），
数据：JSON.stringify（{login:{“loginid”：userid，“reqType”：“R”}），
键入：“POST”，
数据类型：“json”，
contentType:'应用程序/json'，
成功：函数（数据）{
$.each（data.GetRejectedRequestsMethodResult，函数（key，val）{
//一些代码
错误：函数（数据、状态、jqXHR）{
警报（“发生错误”）；
}
})；//end$.ajax

---

像上面一样，我有很多ajax调用…问题是在第一个ajax完成后，图像隐藏。

您可以设置一个变量，该变量在ajax开始时递增，在ajax完成时递减。 在ajaxStop函数内部，检查此变量是否为0。如果为0，则仅隐藏图像

这样做,

$(document).ready(function () {
  var count=0;
  $('#LoadingImage').on('ajaxStart', function(){
      count++;
     if(count===1){
         $(this).show();
     }
  }).on('ajaxStop', function(){
     //count is decrementing and on same time checking whether it becomes zero
     if(!--count){
       $(this).hide();
     }
  });

  //suppose 10 simultanious ajax calls
  for(var j=0;j<10;j++){
     $.ajax({
     //configure whatever you want
     });   
  }
});

$（文档）.ready（函数（）{
var计数=0；
$（'#LoadingImage'）。在（'ajaxStart'，function（）上{
计数++；
如果（计数==1）{
$（this.show（）；
}
}).on（'ajaxStop'，函数（）{
//计数正在递减，同时检查它是否变为零
如果（！--count）{
$（this.hide（）；
}
});
//假设同时有10个ajax调用
对于（var j=0；j1首先，
.bind
是去润滑的，使用
.on
函数可以创建一个这样的函数吗？这将非常有帮助。在我的ajax内部递增的变量不能在外部访问…如果我发出警报来了解它的值，它会警告错误的值..在ajax函数外部声明变量。如果你面临请再次共享修改后的代码，以便调试。@PraveenGodfrey请使用jsfiddle.net或jsbin.com复制您面临的问题。这将为您提供更好的解决方案answers@Dinoop帕洛利：真是费劲啊。我的页面中有8个ajax调用。所有ajax调用都在文档中给出。ready（）所以我所有的ajax调用都在document.ready（）上同时启动但结束时间各不相同。一个人可能会获取较少的记录，并在200毫秒内结束，而一些人可能需要获取许多记录，可能需要1200毫秒…！！这是我的情况。你能根据这个情况编辑你给出的上述代码吗？？？@PraveenGodfrey我想你还没有测试我的代码。让我解释一下。假设一次启动8个调用，那么计数变量iable递增到8，如1,2，---8。当第一个Ajax调用开始时，图像变得可见
（count==1）
。当每个Ajax调用结束时，图像将递减到7,6,5----到0。当0到来时，表示所有调用都成功
（！--count）
。因此图像将隐藏。