JQuery实现网页加载效果
页面 Loading 条基本人人都会用。它的原理很简单：在页头放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。还有人在不同位置放置多个 JS ，每个 JS 用于逐步增加 Loading 条的宽度，它在一定程度上缓解了访客等待载入的枯燥感，同时还能客观反映页面载入的进度。若再配以 jQuery 内建的动画效果，其完全可以与浏览器自带的状态条媲美。
我没搞的那么麻烦，懒的去放那么多JS，又要调时间…下面说下原理
首先，引入 jQuery 框架<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js”></script>(一定要放在页头 <head> 标签内)。然后在 <body> 标签起始位置放置：
<div id=”loading”></div>
CSS 可以这么写：
#loading
{
BACKGROUND-IMAGE: url(/wp-content/themes/atahualpa/images/loading.gif);
Z-INDEX: 3;
background-repeat: no-repeat;
WIDTH: 80%;
HEIGHT: 63px;
background-position: center;
TOP: 0px;
background-color: #343434;
text-aling:center;
}
在 footer.php 最末尾放上：
<script type=”text/javascript”>setTimeout(function(){$(“#loading”).hide(500)},3000)</script>
还有就是简单说下Loading 状态条
效果看这里：Http://www.tiham.com/examples/LoadingBar.htm
<body> 标签起始位置改为：
<div id=”loading”><div></div></div>
CSS 改为：
#loading
{
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading
div {
width:1px;
height:20px;
background:#F1FF4D;
}
准备工作到这里就做好了。
接着请随意发挥，依照页面加载的顺序，在模板各个部分的适当位置放置：
<script type=”text/javascript”>
$(“#loading
div”).animate({width:”16px“})
</script>
其中红色数值应该随载入顺序逐步增加，直到 footer.php。另外别忘了在 footer.php 最末尾放上：
<script type=”text/javascript”>setTimeout(function(){$(“#loading”).hide(500)},3000)</script>