0

このようなajaxの開始/停止機能にバインドされた読み込み画像を指定しました。

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

これで、document.ready（）の下のページに多くのajax呼び出しがあります。したがって、すべてのajax呼び出しが同時に開始されます。ただし、ajaxの停止は、ajaxの結果によって異なります。

画像の読み込みが表示され、1つの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が完了した後、画像が非表示になることです。

4

1 に答える 1

2

Ajaxの開始時にインクリメントし、Ajaxの完了時にデクリメントする1つの変数を設定できます。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
     });   
  }
});

これは（理論的には）機能するはずです。

于 2013-02-19T13:52:42.390 に答える