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

Question

我已经给出了一个绑定(bind)到 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。如果为 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
     });   
  }
});

这应该有效(理论上)。