6

重複の可能性:同じ問題 (未解決)

Ajax 呼び出しの前に DOM をロードすることを示し、Ajax 呼び出しの後にそれを非表示にします。何らかの理由で、ロード中の画像は ajax 呼び出しが完了した後にのみ表示されます。結果は、私が入れない限り、読み込み中の画像さえ表示されないということdelay(#).hide(0)です。コードは次のとおりです。

$("#loading-popup").show();
$.ajax({
// ajax here
});
$("#loading-popup").hide(0);

私の Web サイトで他の Ajax 呼び出しをテストしましたが、同じ問題が発生します。誰かがこれを解決しましたか？Chrome26を使用しています。

編集:同期ajax 呼び出しを使用していることを指定するのを忘れていました。( async: false)

4

5 に答える 5

17

ajax 呼び出しが同期か非同期かによって異なります。

非同期ajax 呼び出しの場合、次のように動作します。

$("#loading-popup").show();
$.ajax({
type: 'POST',
// other parameters
success: function(yourdata)
{
    $("#loading-popup").hide();
}

同期ajax 呼び出しの場合、そうではありません。Ajax が最初に実行され、他のすべてのプロセスがブロック/キューに入れられます。

これを回避するには、次のように setTimeOut を使用します。

setTimeout(function () {
$("#loading-popup").show();
$.ajax({
type: 'POST',
async: false,
// other parameters
//
// other codes
});
$("#loading-popup").hide();
}, 10);

ただし、同期であるため、読み込み中の GIF はアニメーション化されず、静的な画像になります (少なくとも Chrome の場合)。

解決策は 2 つしかないと思います
。1) 非同期 ajax 呼び出しを使用する
2) 静的読み込みイメージを使用する

于 2013-04-14T16:48:40.957 に答える
0

これは別の方法かもしれません。

var $ani = $('#loading-popup').hide();
$(document)
  .ajaxStart(function () {
    $ani.show();
  })
  .ajaxStop(function () {
    $ani.hide();
  });
于 2013-12-01T03:50:18.617 に答える
0

ajax()は関数であり、そのasync下のステートメントはajax呼び出しが完了する前に実行される可能性があります。あなたは隠れるsuccessか、done機能しなければなりません。

$("#loading-popup").show();
$.ajax({
// ajax here
}).success(data){
   $("#loading-popup").hide(0);
})
于 2013-04-14T15:32:46.320 に答える
0

私はこれについてパーティーに少し遅れていることを知っていますが、将来の参考のために、ローディングアニメーションが必要で、同期 ajax 呼び出しを使用し、クロムでアニメーション化する場合は、このサードパーティの ajax スクリプトを使用できます: http:// fgnass.github.io/spin.js/# !

Spin.js は、AJAX 読み込み GIF の解像度に依存しない代替として使用できるスピン アクティビティ インジケーターを動的に作成します。

私はそれを広範囲に使用しており、私にとって完璧に機能します。

于 2013-08-28T11:17:20.063 に答える
0

この問題がすでに解決されているかどうかはわかりませんが、次のことを試してください。

$("#loading-popup").show();
$.ajax({
// ajax here
success: function(data) {
  $("#loading-popup").hide();
}
});

これが機能するかどうか教えてください..

于 2014-09-20T03:41:45.340 に答える