在页面加载时显示 AJAX 加载器答案

【问题标题】：Display AJAX Loader on page load在页面加载时显示 AJAX 加载器
【发布时间】：2012-03-01 17:44:42
【问题描述】：

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

我希望 AJAX 加载器在页面加载时出现，加载完成后我希望加载器消失。谁能给我发个代码？

【问题讨论】：

正在加载什么？ AJAX 加载器是什么意思？
AJAX加载栏ajaxload.info
主要思想是，您可以在页面上放置一个隐藏的动画 gif。当 ajax 请求开始时你显示图像，当它完成时你再次隐藏图像......试试这种方式......类似问题已经有很多答案.. 看看that 一个例子......
可能duplicate...

【解决方案1】：

通常这是通过在内容顶部显示/隐藏一个或两个 div 来完成的。您可以从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();
});

【讨论】：

@SandroVardiashvili 那么你应该看看meta.stackexchange.com/questions/5234/…

【解决方案2】：

您可以显示图像，例如this，只要您进行 Ajax 调用，然后在收到 ajax 调用的响应时隐藏图像。

【讨论】：

【解决方案3】：

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;
    });
});

【讨论】：

【解决方案4】：

https://preloaders.net/en/ajax_loader_script 在这里您可以找到完整的描述以及 GIF、SVG 甚至 APNG 格式的加载器动画

【讨论】：