为WordPress添加加载进度条

前言

嗯。。大家一定见过很多站点都有这个加载进度条啊。

具体效果久伴就不截图了。欢迎刷新页面看网页头部啊。。一条灰色的进度条的说~

需要你的模板加载jquery库,加载方法在这里就不再敖述了。

简单说一下吧,这个效果呢,是使用jquery库来完成的,在加载到代码是显示一个条出来,然后控制这个条的宽度,也就是说,你把带有宽度的语句添加到合适的位置就可以达到加载进度显示的目的了。

方法如下:

1.在header.php中添加

  1. <div id=“w-loading”><div></div></div>  

这个添加到自己模板header.php合适的位置上。久伴是添加在了header.php的标签中。

2.添加加载进度显示的位置

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

上述代码中,width:”33%”可以更改。更改为自己需要的百分比。 久伴将上述代码放置到harder.php(20%)加载文章的循环之后(40%)和sidebar.php(60%)以及底边栏(80%)。

3.添加jQuery代码到footer.php

  1. <script type=“text/javascript”>  
  2. jQuery(document).ready(function(){  
  3. jQuery(“#w-loading div”).animate({width:“100%”},800,function(){  
  4. setTimeout(function(){jQuery(“#w-loading div”).fadeOut(500);  
  5. });  
  6. });  
  7. });  
  8. </script>  

4.添加CSS代码到style.css文件

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

可以按照自己的要求修改颜色啥的

人已赞赏
wordpress教程

WordPress安全优化 禁止使用admin用户名尝试登录

2018-3-6 17:04:00

wordpress教程

WordPress拒绝黑名单中信息的评论发表

2018-3-12 10:15:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索