多次ajax调用后页面加载图像

Question

我已经给出了一个加载图像绑定到这样的 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 

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

Answer 1

您可以设置一个变量，该变量在 Ajax 启动时递增，在 Ajax 完成时递减。 在 ajaxStop 函数中检查这个变量是否为 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
     });   
  }
});

这应该可行（理论上）。