页面加载时显示AJAX加载器

Question

你好，我刚接触JavaScript，不知道如何使用它。

我想在页面加载时出现AJAX加载器，在加载完成后，我希望加载器消失。有人能为我发布一段代码吗？

- Sandro Vardiashvili

---

什么是加载？什么是 AJAX 加载器？ - Jivings

AJAX 加载条 http://www.ajaxload.info/ - Sandro Vardiashvili

主要思路是将一个隐藏的动画gif放到页面上。当ajax请求开始时，显示该图像，当请求完成后再次隐藏图像...尝试这种方式...已经有很多类似问题的答案了...例如看看这个。 - PrimosK

可能 重复... - PrimosK

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

- Frankline

Answer 2

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

- Timur Gafforov

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

- mgraph

Answer 4

当您进行Ajax调用并从中获取响应时，可以显示图像，例如this，然后隐藏该图像。

- Sapan Diwakar