jquery - load()関数が終了するまでjqueryが回転する円

Question

私のサイトの index.php ページには、ユーザーがクリックして結果を絞り込めるフィルター オプションのリストがあります。いずれかをクリックすると、

jquery は、index_backend.php という別のファイルで生成された内容を div の内容に入力します。

私のコードは次のとおりです

$("#scores").click(function() {
    var url = 'index_backend.php';
    var data = 'type=scores';

    $('#center').load(url, data);
});

ただし、URL の $_GET['type'] 変数の値によっては、index_backend.php ファイルの読み込みに時間がかかる場合があります。ファイルの読み込みが完了したことを確認する方法はありますか? 入れてみた

$(document).ready(function () {
    $(".loading").fadeOut('slow');
});

index_backend.php ファイルに追加しましたが、うまくいきませんでした。何か案は？

Answer 1

$('#center').load(url, data, function() {
  $('.loading').fadeOut('slow');
});

ドキュメンテーション

ページが正常に読み込まれたかどうかを検出するために、エラー ハンドラーを追加することで、少しワイルドにすることもできます。

$("#center").load(url, data, 
    function (responseText, textStatus, req) {
        if (textStatus == "error") {
          alert("Oh bother!!!!");
        } else {
          $('.loading').fadeOut('slow');
        }
});

アップデート

ここで良い読み込みアイコンを取得できます。

使用するには、画像要素を作成します。

<a class="loading" href="loading.gif" style="display:none">

これがあなたのJSになります：

$("#scores").click(function() {
    $('.loading').fadeIn('fast');
    var url = 'index_backend.php';
    var data = 'type=scores';
    $('#center').load(url, data, function() {
      $('.loading').fadeOut('slow');
    });
});

Answer 2

API http://api.jquery.com/load/で説明されているように、完全なコールバックを使用します。

$('#center').load(url, data, function() {
    // load complete
});