今

天还是给站点加上了加载效果，其实主体淡出淡入已经是一个效果了，但不够明显，在不影响视觉效果的情况下采用了早期那种进度条的效果，这种效果百度一搜就有，我还发现不少网站在用。但有一个问题：

挺有趣的 所以在此分享一下该方法，详细步骤如下：

步骤一

首先是jQuery库，这个是必不可少的。而且要放在header.php ！（我也不想，迫不得已，原因不解释）

然后在header.php加一个进度条的div，下面这个jv-loadingbar就是我们所要折腾的东西了。

<div id="jv-loadingbar"></div>

这个可以把它放到顶部或者导航下面，视个人情况而定。

步骤二

给这个进度条定义一个样式

#jv-loadingbar {
display:none;
height: 60px;
position: absolute;
left: 0;
top: 0;
opacity:.5;
z-index: 999;
background:#428bca;
box-shadow:2px 0px 10px #428bca;-moz-box-shadow:2px 0px 10px #428bca;-webkit-box-shadow:2px 0px 10px #428bca;
}

其中display:none不用我说了吧，意思是首先把这个进度条隐藏，加载的时候才让它显示，否则它就会占空间了，当然有的人不喜欢这样，也可以不用，视个人喜好而定，position: absolute是绝对定位，用left和top调整到合适位置。

步骤三

这一步是采用jQuery的自定义动画效果animate，分别按网站各个模板的加载顺序定义进度条的长度，一般我们wp网站的加载顺序都是header.php、主循环、sidebar.php、……。所以我们可以将进度条的长度按20%、50%、80% 分别放到这几个模板中。可以参照你的index.php，然后加进去，代入如下：

<script type="text/javascript">
$("#jv-loadingbar").show();
$("#jv-loadingbar").animate({width:"20%"},100);
</script>

这两句很简单，第一句是显示进度条（因为我们用css定义了它初始状态是隐藏的，现在要加载就得先显示出来）；第二句是控制它的长度变为总长的20%，100是变化速度，数值越大速度越慢，这是一个过度效果，所以可以调整长度百分比按加载顺序分别放在其他模板中。

步骤四

一直加载，进度条变长，直到footer.php达到100%，之后我们让它淡出（消失），如果你是Ajax加载还要让它的长度归0。下面的代码加入footer.php中：

<script type="text/javascript">
$("#jv-loadingbar").animate({width:"100%"},100,function(){
$("#jv-loadingbar").fadeOut(1000,function(){$("#jv-loadingbar").css("width","0");});
});
</script>

上面第一句是让进度条长度加到100%，然后加一个回调函数放置淡出效果；第二句是淡出（加载完毕得让进度条消失），1000是淡出速度，内部还有一个回调函数让进度条长度归0。因为过度是需要时间的，所以需要回调函数，不多解释了，可以看看W3School的jQuery教程。
到此一般的网站加载效果已经出来了，如果是全站Ajax，还要把上面的效果加到jQuery的点击事件内的ajax函数中去。效果可以参考本站顶部加载进度条！以上。