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 thoughts on “WordPress-jQuery加载条”
技术含量越来越高了~
@zhx
呃。这个纯粹CP的别人的代码。。。
补充一下~沙发~
@zhx
再占一层楼就是axiu的作风了~~吼吼!
嘿嘿我这个寒假准备折腾JavaScript
@EinCy
嘿嘿有志向!!!
加载条是很炫,但是感觉简洁风格也挺好。
@特种电缆
谢谢夸奖。你到底是不是SPAMMER!!!??
@Dick_Wu
你就当我是,反正都是留言
还是获准乃。我也觉得你不是spammer所以问了一句 😕
@Dick_Wu
先祝龙年大吉!!
留言时顺便给自己的站加了个链,等建了博客就用新的链接,呵呵。
@特种电缆
新年快乐。原来是这样啊。~
@Dick_Wu
才注意到回复后面有个操作系统,专门摆度了一下你的,惭愧啊,知道的太少。
@特种电缆
呵呵。。那是插件而已,被我集成到主题里面,算CP党。。。果酱果酱!
早就想改我的用的主题,添加自己的元素。又找到一个咯
@NICK博客
嘿嘿。荒淫折腾!
= =|| 我一直以为JS是在全部文档载入完成之后才逐条执行的,原来。。。。。。
学习了
@Clarkok
除了开Opera Turbo的浏览器,貌似都是载入多少执行多少~
@Dick_Wu & @Dick_Wu
囧了= =||
@Clarkok
在dom加载完成之后立刻执行
@牧风
这个更专业!
原来浏览器不会先把整个页面读取完再执行脚本啊,学习了。
@Indeed
你和楼上Clarkok队形整齐啊!
东西太多了,反而不好
专业哟~ 我对待吗一窍不通
@何大爷
您谦虚!!!
十万的流量啊 厉害
@Louis Han
那是在很低的基数上上升的。。。其实就只有一点点。
服务器还是最重要,新浪那网页都打开溜溜的
@老人头
这篇文章和服务器有关系么。。。
我也是喜欢给博客jQuery动态
@Firm
是啊~而且最好动态是鼠标到哪里动到哪里,而不像新浪网一样到处在动。。。。
折腾永无正止境啊。。
@zoe
那是!无折腾不铁血
学习了!! 😛
@呆呆驴
荒淫拿去折腾!
一直有人叫我写,我一直都懒的写,因为网上一大堆教程啊,哈
@zwwooooo
那人不是我么。。。
@Dick_Wu
你只是其中一个,提过的人应该有5个以上
@zwwooooo
哦~以后可以把我这个链接扔给他们
CP黨路過…新評論系統?!
@Cichol
不是,是楼上zwwooooo 大叔原创的。还是WP 原生的评论+willin kan 的Ajax提交评论。
@Dick_Wu
話說blogger那邊的回覆回覆我還沒能搞定orz
@Cichol
你指的是嵌套评论?
嗯,google android也是類似情況,太過自由,
更新起來各家不同手段…各種困難…
@Cichol
过分自由未尝是好事。不过对于爱折腾的来说越自由越好啦!
我的Blogger至今还是原带主题。。已经荒废了
T^T完全看不懂啊~不过很喜欢你的新主题~
@Kevin Luo
吼吼~荒淫!荒淫!这个本来就是给站长折腾得嘛。多折腾折腾就懂了。
恩,这个够详细,等需要的时候必须加上。用户体验应该不错。
@小呆
呵呵~代表杜拉克草谢谢夸奖
很简单。不过我jquery一直在页底加载。。