WordPress-jQuery加载条

之前在自力博客看到了加载条,觉得很羡慕有这个功能的站点。那时候自己对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. 今天流量上了十万位。。。有点小激动~

51 Replies to “WordPress-jQuery加载条”

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.