你好,我刚接触JavaScript,不知道如何使用它。
我想在页面加载时出现AJAX加载器,在加载完成后,我希望加载器消失。有人能为我发布一段代码吗?
你好,我刚接触JavaScript,不知道如何使用它。
我想在页面加载时出现AJAX加载器,在加载完成后,我希望加载器消失。有人能为我发布一段代码吗?
通常这是通过显示/隐藏一个或两个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();
});
https://preloaders.net/en/ajax_loader_script 在这里,您可以找到完整的描述以及GIF、SVG甚至APNG格式的加载器动画。
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;
});
});