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

您可以显示图片，例如this，一旦进行Ajax调用，然后在从ajax调用获得响应时隐藏图像。

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

Answer 4

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

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

4 个答案: