javascript - jQueryのload（）を介してページの一部が読み込まれている間に読み込みアニメーションを表示する

Question

私のサイトでは、jQueryのload()関数を介して「ページ」を動的にロードしたいのですが、ロードアニメーションを追加したいと思います。

function loadPage(){
  $("#content").load("example.html");
}

<div id="loading"></div>jQueryがそのコンテンツをロードしている間に表示するコードをどこに配置しますか？

前もって感謝します。

Answer 1

のコールバック関数を使用して、.load()終了時に読み込み中のdivを非表示にします。

function loadPage(){
    $('#loading').show();

    $("#content").load("example.html", function () { //calback function
         $('#loading').hide();
    });
}

Answer 2

あなたはこのようなことを試すことができます：

$(document).ready(function() {
    $(this).ajaxSend(function() {
        $(this).append('<div id="loading"></div>');
    }).ajaxStop(function() {
        $('#loading').remove();
    });
});

これは、すべてのajax呼び出しで機能します...

Answer 3

何をしたいのか正確にはわかりませんが、コンテンツをにロードしたいと思うかもしれませんdiv。cssクラスを作成する必要があります。

.loading {
  background: url(loading.gif) center center;
}

addClass()ロードを開始したときにこのクラスをdivに追加し（クリアした後）removeClass、.loadコールバックで削除します。