javascript - 在页面加载时显示 AJAX 加载程序

Question

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

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

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