之前在自力博客看到了加载条，觉得很羡慕有这个功能的站点。那时候自己对jQuery的认识几乎为0，所以没有看懂力哥的代码。

之后暑假用上了zBench主题，在这期间学习了很多的Javascript只是，十月份的时候再Google了一下，看到了杜拉克草大牛的代码，也给主题也添加了个加载条。

再说一下原理，其实做这个加载条真心不难，一般的WP主题都是首先加载header，再加载sidebar，再加载footer，所以在这三个位置插入三个时间点，然后通过jQuery做一个加载渐隐的特效，再在合适的位置插入加载条，就成功了。

接下来就是CP党爱做的事情喽~上杜拉克草大牛的代码：

一、加载jQuery

这个不解释。。。也不打算花篇幅吐槽新版jQuery那臃肿的身躯。。

二、插入三个JS节点

1、在header.php的末尾插入33%进度的节点

 <script type="text/javascript">
 jQuery("#w-loading div").animate({width:"33%"});
 </script>

2、在sidebar.php的末尾插入66%进度的节点

 <script type="text/javascript">
 jQuery("#w-loading div").animate({width:"66%"});
 </script>

3、在footer.php的末尾插入100%进度的结束代码

 <script type="text/javascript">
 jQuery(document).ready(function(){
 jQuery("#w-loading div").animate({width:"100%"},800,function(){
 setTimeout(function(){jQuery("#w-loading div").fadeOut(500);
 });
 });
 });
 </script>

三、插入加载条

在网页适当的位置加入加载条：

 <div id="w-loading"><div></div></div>

四、CSS参考

 #w-loading{z-index:99999;position:absolute;left:0;top:0;width:100%;height:25px;}
 #w-loading div{width:0;height:25px;background:#ccc;}

好了完工~

P.S. 今天流量上了十万位。。。有点小激动~