1

次のようなjQueryを使用して複数のAJAXリクエストを作成する機能があります。

function() {
    $.ajax({
        url: "/url",
        data: {
            params: json_params,
            output: 'json'
        },
        async: false,
        success: function(res) {
            data1 = res
        }
    });

    $.ajax({
        url: "/url",
        data: {
            params: json_params,
            output: 'json'
        },
        async: false,
        success: function(res) {
            data2 = res;
        }
        return data1 + data2;
    });
}

この関数が実行され、データが読み込まれている間、読み込み中の画像をブロックせずに表示したい。

ajaxSend ajaxComplete を使用して読み込みアイコンを表示しようとしましたが、複数の ajax 呼び出しがあるため機能しません。関数の最初に読み込みを表示し、関数の最後に非表示にすることも試みましたが、失敗しました。

これを行う方法？

4

4 に答える 4

2

どのくらい正確にロードしようとしましたか？要素でajaxStart/ajaxStopイベントを使用することは、目的を達成するための1つの方法です。次のようになります。

$('#loadingContainer')
.hide()  // at first, just hide it
.ajaxStart(function() {
    $(this).show();
})
.ajaxStop(function() {
    $(this).hide();
})
;

たぶんこれはあなたを助けるでしょう、私は以前これをよく使いました、そしてそれは魅力のように働きます。

于 2013-01-04T16:23:15.900 に答える
1

答えは、実際にはこれらのいくつかの組み合わせだと思います。ajax start から始めて、読み込み中の画像を 0 (または開始したい場所) に表示します。次に、コールバック関数を使用して読み込みバーをインクリメントし、再描画します。

例えば

 //when ajax starts, show loading div
$('#loading').hide().on('ajaxStart', function(){
    $(this).show();
});
//when ajax ends, hide div
$('#loading').on('ajaxEnd', function(){
    $(this).hide();
});
function ajax_increment(value) {
    //this is a function for incrementing the loading bar
    $('#loading bar').css('width', value);
}

//do ajax request
$.ajax({
  url:"", //url here 
  data: {params:json_params,output:'json'},
  async: false,
  success: function (res) {
    data1=res
    ajax_increment(20); //increment the loading bar width by 20
  }
});

$.ajax({
  url:"", //url here 
  data: {params:json_params,output:'json'},
  async: false,
  success: function (res) {
    data1=res
    ajax_increment($('loading bar').css('width') + 10); // a little more dynamic than above, just adds 10 to the current width of the bar.
  }
});
于 2013-01-04T16:34:32.530 に答える
0

次のようなことを試すことができます。カウンターを使用してコールバックを定義すると、必要な回数呼び出された後、コールバックは画像​​を非表示にします。

showLoadingImage();

var callbackCount = 0;
function ajaxCallback() {
  ++callbackCount;
  if(callbackCount >= 2) {
    hideImage();
  }
}

$.ajax({
  url:"/url", 
  data: {params:json_params,output:'json'},
  async: false,
  success: function (res) {
    data1=res
    ajaxCallback();
  }
});

$.ajax({
  url:"/url", 
  data: {params:json_params,output:'json'},
  async: false,
  success: function (res) {
    data2=res;  
    ajaxCallback();
  }
});

ただし、これは非同期呼び出しにのみ必要です。それを行う方法（すべてのAJAX呼び出しは同期的です）では、外部関数の最後に戻る前に、hideImage（）を呼び出すことができるはずです。

于 2013-01-04T16:23:31.423 に答える
0

最初にバインドしてから、次のように終了できるはずです。

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

または、 beforeSend と on Complete を使用できます

$.ajax({
    url: uri,
    cache: false,
    beforeSend: function() {
        $('#image').show();
    },
    complete: function() {
        $('#image').hide();
    },
    success: function(html) {
        $('.info').append(html);
    }
});
于 2013-01-04T16:19:36.113 に答える