为WordPress添加加载进度条
嗯。。大家一定见过很多站点都有这个加载进度条啊。
具体效果大D就不截图了。欢迎刷新页面看网页头部啊。。一条灰色的进度条的说~
需要你的模板加载jquery库，加载方法在这里就不再敖述了。
简单说一下吧，这个效果呢，是使用jquery库来完成的，在加载到代码是显示一个条出来，然后控制这个条的宽度，也就是说，你把带有宽度的语句添加到合适的位置就可以达到加载进度显示的目的了。
方法如下：
1.在header.php中添加
|
1 2 3 |
<div id="w-loading"><div></div></div> |
这个添加到自己模板header.php合适的位置上。 大D是添加在了header.php的标签中。
2.添加加载进度显示的位置
|
1 2 3 4 |
<script type="text/javascript"> jQuery("#w-loading div").animate({width:"33%"}); </script> |
上述代码中，width:"33%"可以更改。更改为自己需要的百分比。 大D将上述代码放置到harder.php（20%）加载文章的循环之后（40%）和sidebar.php（60%）以及底边栏（80%）。
3.添加jQuery代码到footer.php
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
4.添加CSS代码到style.css文件
|
1 2 3 4 |
#w-loading{z-index:99999;position:absolute;left:0;top:0;width:100%;height:25px;} #w-loading div{width:0;height:25px;background:#ccc;} |
可以按照自己的要求修改颜色啥的。嘿嘿。。
想折腾的童鞋就抓紧下手吧~
版权声明
转载保留版权： 大D技研室 | 《为WordPress添加加载进度条》
本文链接地址：https://www.dadclab.com/archives/1020.jiecao
转载须知：如果您需要转载本文，请将版权信息，版权授权方式，以及本文的链接地址注明，谢谢合作。
已有 33 条评论
发表评论
电子邮件地址不会被公开。 必填项已标注。
哈哈，搞定，感谢大d~~
不谢不谢~~
好厉害好厉害~
呃。。。YM兔兔
换个颜色吧 进度条颜色有点浅~
好东西，学习了～
欢迎常来
我记得IE6.0时代是有进度条的～
>_< 伦家说的是页面顶部的进度条啦~~(>_<)~~
我看到了啦,只是发散一下嘛
(*^__^*) 嘻嘻……
@dave
对啊，为什么现在浏览器都没有IE6的进度条了呢
這個已經果斷實現 挺好的 HOHO
报告大d，第三段代码，结尾多了一个>，今天才发现
哈哈，我也装了
效果不错，但我还是会爱下去感觉加载顶部的进度条不怎么好看，嘿嘿。如果出现在屏幕中央就不错，不过这样用户体验就不怎么好了
这个可以留着，功能有点洋气！~！~
Pingback： 为WordPress添加加载进度条 « Windows Fans
亲，效果难道是你博客顶部的那个效果？？
貌似真的很赞哇。。。。
对了，你用的是show-useragent.插件么 ？ 怎么直接显示文字出来的呢？求解释！
@阳光博客
确实是我Blog头部的效果。
是wp-useragent插件
这个功能看着是有点眩，嘿嘿
具体添加到哪个位置啊大神！
@lemon
这个是根据主题来决定放置位置的。研究下自己的主题吧~
@大D 看不懂php啊！
寻找这个已经很久了
Pingback： 网站加载进度条代码 让你的网站华丽的加载 | 一堵墙
这个进度条效果，看起来很有感觉。。
大牛，你好~
Pingback： WordPress优化之为WordPress添加加载进度条 | BabyBichu
代码小白撸过
Pingback： Wordpress优化之为WordPress添加加载进度条 – BabyBichu