在頁面加載時顯示AJAX加載器

Question

你好，我是javascript的新手，不知道如何使用它。

我想在頁面加載時出現AJAX Loader，加載完成后我想讓加載器消失。 任何人都可以給我發一個代碼嗎？

Answer 1

通常，這是通過在內容的頂部顯示/隱藏div或2來完成的。 您可以從http://www.ajaxload.info/獲得一個花哨的加載GIF來幫助您入門。 然后你會想要在你的頁面上放置一個DIV：

<div id="loading">
    <p><img src="loading.gif" /> Please Wait</p>
</div>

默認情況下你會想隱藏這個，所以你需要添加這個CSS：

#loading { display:none; }

您還需要為此設置顯示：

#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%;
       background-image:url("transparentbg.png"); }

文件transparentbg.png將是25x25黑色PNG設置為約80％不透明。 接下來，您需要一種使用jQuery顯示和隱藏它的方法：

function showLoading() {
    $("#loading").show();
}

function hideLoading() {
    $("#loading").hide();
}

現在，當您需要執行諸如查詢數據的外部頁面之類的操作時，您可以使用此功能：

showLoading();
$.post("data.php", {var:"foo"}, function(results){
    $("content").append(results);
    hideLoading();
});

Answer 2

https://preloaders.net/en/ajax_loader_script在這里您可以找到完整的描述以及GIF，SVG甚至APNG格式的加載器動畫

Answer 3

您可以在進行Ajax調用后立即顯示圖像，例如此圖像，然后在從ajax調用獲得響應時隱藏圖像。

Answer 4

HTML：

<div style="display:none" id="dvloader"><img src="loading.gif" /></div>

JavaScript的：

$(function() {
    $(".changepass").click(function() {
        $("#dvloader").show();
        $(".block1").load("views/changepass.template.php", function(){ $("#dvloader").hide(); });
        return false;
    });
});