现在的位置: 首页Wordpress>正文
为WordPress主题添加"网页加载中"特效
2010年04月10日 Wordpress ⁄ 作者:知更鸟 ⁄ 共 1144字 评论数 43 ⁄ 被围观 6,789+

为了加强浏览者的体验,不在等待页面加载时感到枯燥,从而关闭网页,很多网站都会制作一个“网页正在加载中”的提示效果或显示加载进程,加载完成后提示消失,大部分都应用在网站的首页,今天我教大家把这一特效添加到Wordpress主题中。要实现该特效同样要用到jquery,如果大家和我目前用的主题一样,为了实现其它特效已提前加载了jquery,那么正好充分利用jquery的强大功能,添加此特效何乐而不为呢?当然仅仅为了实现这个特效,而去加载50几K的jquery就有点得不偿失了。
实现方法:

打开header.php模板文件

第一步:加载jquery.min.js

外链接格式:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script>

内链格式:

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js" ></script>

第二步:在</head>前添加一段JS代码

<script type="text/javascript">
jQuery(function(){
jQuery('#loading-one').empty().append('页面加载完毕.').parent().fadeOut('slow');
});</script>

第三步:在<body>后添加显示效果样式

<div id="loading" style="position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000 url(这里输入一个图片地址) no-repeat center; opacity:0.6; filter:alpha(opacity=60);font-size:14px;line-height:20px;" onclick="javascript:turnoff('loading')">
<p id="loading-one" style="color:#fff;position:absolute; top:50%; left:50%; margin:50px 0 0 -50px; padding:3px 10px;" onclick="javascript:turnoff('loading')">页面载入中,请稍后...</p>
</div>

图片大小格式不限,不加图片也可以,到此该特效添加完毕,具体效果可以看我的博客

目前有 43 条留言 其中:访客:28 条, 博主:13 条 引用: 2

  1. tuge : 2010年04月10日 774 天前 00:40:26  1楼 @回复 回复

    你好,知更鸟,我用了HotNews Pro2.1主题,安装了WP-PostViews插件,有个说小不小,说大不大的问题想请你解决下
    就是显示出来阅读次数前面都多一个数字1,我刚发表一篇日志,首页就直接显示10 views
    请问怎么解决?谢谢!

    • 知更鸟 : 2010年04月10日 774 天前 00:50:17 @回复 回复

      呵呵,虚增流量,我检查了一下模板代码,没发现有多余的数字,看看插件是否有什么功能没设置好

      • tuge : 2010年04月10日 774 天前 10:31:39 @回复 回复

        HotNews Pro2.1主题中的index.php原本就有有&nbsp
        所以我安装WP-PostViews并激活后并没有修改index.php,网站中直接显示阅读次数(views),然后我在Post Views Options中的Views Template选项中views改成中文“次阅读”,这样英文就变成中文了
        但自始至终阅读数字前都多了一个数字1,搞得很郁闷,我也不是很懂代码,TT
        刚才重新上传覆盖index.php,显示还是一样,怎么做啊??求助知更鸟!!

        • 知更鸟 : 2010年04月10日 774 天前 13:21:08 @回复 回复

          这个插件有两个版本一个是WP-PostViews和WP-PostViews Plus,我用的是后一个(而且有汉化版),如果用第一个可能会出现这个问题,按插件要求替换相关代码

        • 知更鸟 : 2010年04月10日 774 天前 13:26:05 @回复 回复

          PS:再有与主题相关的问题,请到主题发布页提出,好让有相同问题的也参考一下

  2. stevejin : 2010年04月10日 774 天前 14:33:14  2楼 @回复 回复

    看来知更鸟很喜欢研究jquery,有更的时候和你学习学习

    • 知更鸟 : 2010年04月10日 774 天前 14:49:51 @回复 回复

      可以说对jquery没有任何研究,只喜欢应用而已

  3. D.C : 2010年04月12日 772 天前 12:37:11  3楼 @回复 回复

    如您博客中,鼠标放置在图片上,图片变高亮需要什么插件??

  4. 越野天使 : 2010年04月12日 772 天前 13:33:41  4楼 @回复 回复

    晕,我用FireFox访问你这个页面一直停在页面载入中的界面。我订阅了你的博客,结果这篇文章的代码导致我的iGoogle首页覆盖了一个大大灰块,点击灰块的任何一部分就跳到你这个页面了。郁闷!

  5. 北极熊 : 2010年04月13日 770 天前 16:12:54  5楼 @回复 回复

    wordpress已经集成jQuery了,不过释放了$变量,只要把Js里的$变量替换成jQuery就OK了,也不用重复载入jQuery.js了。

    • 北极熊 : 2010年04月13日 770 天前 23:28:39 @回复 回复

      唔,我搞错了,是后台默认调用了wordpress内部的jQuery,前台有没有调用还是得看模板……

      • 知更鸟 : 2010年04月14日 770 天前 00:11:18 @回复 回复

        嗯,前台没什么关系,个人认为是WP最弱智的,后台弄个JQ干吗,什么滑动隐藏,我们不需要

  6. Eyson : 2010年04月15日 769 天前 10:18:02  6楼 @回复 回复

    WP最弱智?哈哈,但还是这么多人用。 :razz:

  7. 小龙 : 2010年04月24日 760 天前 00:17:13  7楼 @回复 回复

    看看了鸟哥的源文件,原来鸟哥用的是 HotNewspro3, 不知道以后会不会分享。。。。。。嘻嘻!

  8. 小龙 : 2010年04月24日 760 天前 01:12:10  8楼 @回复 回复

    鸟哥博客里 用的 显示代码的那个? code 是什么插件啊?

    • 知更鸟 : 2010年04月24日 760 天前 10:02:19 @回复 回复

      不是插件,使用2.1版主题,编辑文章是时加入{blockquote}标签,就会出现这个效果

    • Panda Liu : 2010年08月02日 660 天前 09:01:59 @回复 回复

      不是很懂

  9. fanzheng : 2010年04月25日 758 天前 17:59:55  9楼 @回复 回复

    学习了,谢谢分享 :)

  10. Innocence : 2010年08月14日 648 天前 00:41:37  10楼 @回复 回复

    请问,你博客的评论回复是用什么插件

    请问,你有没有用过Revolution Two系列Streamline Child Theme这个主题

    • 知更鸟 : 2010年08月14日 648 天前 12:44:17 @回复 回复

      评论部分没用插件
      Revolution Two系列主题很经典,但已很古老,不能适应新版WP

  11. hujun : 2010年08月31日 630 天前 23:19:03  11楼 @回复 回复

    请问,你博客的评论回复不是用插件,那你发布的主题怎么没有呢?

  12. hujun : 2010年09月01日 630 天前 01:43:14  12楼 @回复 回复

    为什么我的主题没有回复评论的按钮呢?

  13. 美丽自信 : 2010年10月20日 581 天前 13:04:43  13楼 @回复 回复

    我也来这里试一下

  14. yesureadmin : 2010年11月02日 568 天前 14:44:00  14楼 @回复 回复

    不错哦,谢谢分享,不过演示里,没有为何?

  15. 7silen : 2011年01月02日 506 天前 22:15:45  15楼 @回复 回复

    鸟哥 我没你这样的效果啊

  16. 7silen : 2011年01月02日 506 天前 22:25:29  16楼 @回复 回复

    这个代码加在哪个位置呃

    • 知更鸟 : 2011年01月02日 506 天前 22:35:35 @回复 回复

      上面写的很清楚

      • cabbe : 2011年01月03日 506 天前 01:04:13 @回复 回复

        你好 这是我的地址:http://www.0575ecity.com/blog/index.php/advanced-online-storage-site-uushare.html
        header.php中加了代码后 日志页面就会出现错位 页面都撇向一边 您可以帮我看下吗

  17. 约定 : 2011年01月03日 506 天前 14:01:36  17楼 @回复 回复

    怎么在首页没效果,其他页面有,能帮我看看吗,www.yaudi.tk

  18. 原来心会疼 : 2011年01月19日 490 天前 11:18:03  18楼 @回复 回复

    页面加载完毕 页面载入中,请稍后...变成口口口口口口口口口口口口是什么原因呢?

    • 知更鸟 : 2011年01月19日 490 天前 12:25:37 @回复 回复

      添加后代码后,把模板文件编码改为UTF-8

  19. oceanmen : 2011年05月18日 370 天前 21:06:08  19楼 @回复 回复

    转了很多有关wordpress的网站,您的绝对是我用起来最爽的!

  20. 沐歌 : 2011年11月09日 196 天前 00:20:43  20楼 @回复 回复

    鸟哥,我在本地测试了下,结果一直停留在“页面正在加载,请稍后。。。。”上,出不来了

  21. 想问鸟哥 : 2011年12月04日 170 天前 22:03:07  21楼 @回复 回复

    我想问你网站那个闪烁的公告是怎么实现的

  22. 杂小窝窝 : 2012年01月13日 130 天前 21:04:37  22楼 @回复 回复

    嗯,我用了ajax的评论插件,每次加载文章加载好后,都会无缘无故地出现“正在提交……”怎么回事?另外,我还想请教一下,当加载时间太长后能不能出现“看起来服务器有点问题或您那里的网络状况不佳,请稍后再来看看。”这类的话??谢谢了!!(这样比较实用!!):)

  23. 一堵墙 : 2012年02月01日 111 天前 19:09:30  23楼 @回复 回复

    这个很不错收藏了

查看来自外部的引用: 2

  • 幫你的網頁加入讀取特效 « I-Share
  • 为WordPress主题添加”网页加载中”特效 | VPC.cc

Wopus问答

给我留言

留言无头像?

留言不能超过1500字,已输入字数:

×
腾讯微博