显示AJAX加载程序在页面加载 [英] Display AJAX Loader on page load
问题描述
你好,我是pretty的新的JavaScript的,不知道如何使用它。
hello I'm pretty new at javascript and don't know how to use it.
我要AJAX装载机出现时,页面加载和装载完成后,我想加载器dissapear。任何人都可以发表我一个code是什么?
I want AJAX Loader to appear when a page loads and after loading is finished I want loader to dissapear. Can anyone post me a code for that?
推荐答案
通常这是显示/隐藏一个或两个分区您的内容的顶部完成。你可以从 http://www.ajaxload.info/ 看中加载GIF,让您开始。然后,你要放置一个DIV您的网页上:
Generally this is done by showing/hiding a div or two over the top of your content. You can get a fancy loading gif from http://www.ajaxload.info/ to get you started. Then you'll want to place a DIV on your page:
<div id="loading">
<p><img src="loading.gif" /> Please Wait</p>
</div>
您会希望这个隐藏在默认情况下,所以你需要添加这个CSS:
You'll want this hidden by default, so you'd need to add this CSS:
#loading { display:none; }
您还希望要设置的显示这一点:
You'd also want to setup the display for this too:
#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%;
background-image:url("transparentbg.png"); }
的文件transparentbg.png将是一个25×25的黑色的PNG设定为约80%的不透明。接下来,您将需要一种方式来显示和使用jQuery隐藏这样的:
The file transparentbg.png would be a 25x25 black PNG set to about 80% opaque. Next you would need a way to show and hide this with jQuery:
function showLoading() {
$("#loading").show();
}
function hideLoading() {
$("#loading").hide();
}
现在你可以使用这个时候,你需要做的是这样一个查询页面的外部数据:
Now you can use this when you need to do something like querying an external page for data:
showLoading();
$.post("data.php", {var:"foo"}, function(results){
$("content").append(results);
hideLoading();
});
这篇关于显示AJAX加载程序在页面加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!