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 条评论。

  1. 技术含量越来越高了~

  2. 嘿嘿我这个寒假准备折腾JavaScript

  3. 加载条是很炫,但是感觉简洁风格也挺好。

  4. 早就想改我的用的主题,添加自己的元素。又找到一个咯

  5. = =|| 我一直以为JS是在全部文档载入完成之后才逐条执行的,原来。。。。。。
    学习了

  6. 原来浏览器不会先把整个页面读取完再执行脚本啊,学习了。

  7. 东西太多了,反而不好

  8. 专业哟~ 我对待吗一窍不通

  9. 服务器还是最重要,新浪那网页都打开溜溜的

  10. 我也是喜欢给博客jQuery动态

  11. 折腾永无正止境啊。。

  12. 一直有人叫我写,我一直都懒的写,因为网上一大堆教程啊,哈

  13. CP黨路過…新評論系統?!

  14. 嗯,google android也是類似情況,太過自由,
    更新起來各家不同手段…各種困難…

  15. T^T完全看不懂啊~不过很喜欢你的新主题~

  16. 恩,这个够详细,等需要的时候必须加上。用户体验应该不错。

  17. 很简单。不过我jquery一直在页底加载。。

发表评论


注意 - 你可以用以下 HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>