首页添加页面载入中提示效果

标签： CSS , jQuery | 作者：万戈 | 点击量14857次

　　不知道为什么，一直对 JQuery 有恐惧和抵触心理，所以在我的网站基本上找不到很酷炫的效果。但是我深知 JQuery 的强大，尤其是木木这些天对 JQuery 的学习与日俱进，网站功能也越来越完善，看地我挺眼馋的。所以想从基本开始学习一下简单的 JQuery，至少不要让我太受打击。接下来要隆重推出本文的关键人物 Evlos，是他的一篇文章将我引入了 JQuery 的正轨，感激之至。

　　Evlos 介绍的这个 JQuery 相对来说比较简单，没有太打击我。效果可以看我的首页，点击任何一篇文章的标题都会显示“页面载入中……”的文字提示。

点击日志标题前

点击日志标题后

　　方法如下：

1、载入 Google 托管的 jQuery 库：

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js">

</script>

2、再加入一段点击后替换文字效果的 JS 代码：

<script type="text/javascript">

jQuery(document).ready(function($){

$('.title h2 a').click(function(){

    $(this).text('页面载入中……');

    });

});

</script>

　　其中 .title h2 a 就是需要替换文字所相应的 CSS 部分，如果需要将整站都改成页面载入中的提示效果，就把 .title h2 a 改成 a 就可以了，整站的链接被点击后就都会显示“页面载入中……”的提示效果。

　　另外，如果是在新窗口中打开链接，那在原窗口中停留的“页面载入中……”这些字还需要用一段 JS 代码将其复原。则代码如下：

<script type="text/javascript">

jQuery(document).ready(function($){

$('.title h2 a').click(function(){

    myloadoriginal = this.text;

    $(this).text('页面载入中……');

    var myload = this;

    setTimeout(function() { $(myload).text(myloadoriginal); }, 1800);       

});

});

</script>

　　从 JS 代码上，我凭借着生疏的编程基础，勉勉强强算是看懂了，就是加了个 Click 事件，反正效果也实现了，我对 JQuery 的阴影也消退了，不错不错，连我这种程度的水平也可以拿下 JQuery，童鞋们快试试吧。

　　再次感谢 Evlos 和他的文章：jQuery点击链接文字后替换文字

　　12月8日 Update:

　　上述方法百般测试后发现，仅在 Opera 浏览器下无效，现参考 Leeiio 的方法解决，替换代码如下：

<script type="text/javascript">

jQuery(document).ready(function($){

$('.title h2 a').click(function(){

    $(this).text('页面载入中……');

    window.location = $(this).attr('href');

    });

});

</script>

» 转载请注明来源：Life Studio » 《首页添加页面载入中提示效果》

» 本文链接地址：http://wange.im/loading-effect-by-jquery.html

» 订阅本站：http://feed.wange.im

2009-12-4 20:44 分类: 电脑网络 , 转来载去 127 条评论

相关日志

本文已盖 127 层楼

回复牧场的新手说：

2010年07月25日于 11:07 下午

我的怎么也没效果……已经在footer.php加载了JQ、JS
- 回复 FISH 说：
  
  2010年08月31日于 2:47 上午
  
  这个我来帮万戈回答你吧
  
  jquery库最好放在头部
  然后move link的相关JS最好放底部.
  因为这个JS效果。需要先加载JQUERY
  如果你的jquery库和链接平移的库同时加载.
  那么就没有办法产生这个效果了。
  JS库的加载顺序是非常的重要的。
- 回复 FISH 说：
  
  2010年08月31日于 2:48 上午
  
  OHMYGOD..
  看错了。
  我以为这个是写链接平移的。汗水~~跑路。丢人丢大了。
- 回复 FISH 说：
  
  2010年08月31日于 2:51 上午
  
  汗汗.,由于刚才看错了。
  现在帮你想想办法吧.
  可能是你没把相应部分的CSS换掉吧.
  
  你先加载JS库
  然后把这段话放在主题里的header.php
  加在
  之后看看吧
  
  jQuery(document).ready(function($){
  $('a').click(function(){
  $(this).text('页面载入中……');
  window.location = $(this).attr('href');
  });
  });
回复木本无心说：

2010年06月5日于 2:41 下午

使用你的方法，发现在opera下貌似不行哦……你给找找原因。
回复木本无心说：

2010年06月4日于 2:44 下午

谢谢，我的pj也用上了……
- 回复万戈说：
  
  2010年06月4日于 3:00 下午
  
  不客气，呵呵，用上就好
回复北街说：

2010年03月9日于 9:05 下午

OK了，是class搞错了~
回复北街说：

2010年03月9日于 8:49 下午

为啥我那边没有效果呢~
- 回复万戈说：
  
  2010年03月9日于 9:06 下午
  
  我看了一下，有啊～
回复 skyoy 说：

2010年02月27日于 3:02 下午

op浏览器始终还是不太满意哦，经常卡住载入中。。
- 回复万戈说：
  
  2010年02月27日于 6:02 下午
  
  OP对JS不太友好。。。
回复集思博客说：

2010年02月20日于 2:37 下午

描述得很通俗，连我都看懂了~~
回复子强说：

2010年01月5日于 1:11 下午

IE下没有效果？
- 回复万戈说：
  
  2010年01月5日于 1:13 下午
  
  在所有浏览器下都是通用的，可能你没有等网页加载完毕就点了
回复子强说：

2010年01月5日于 12:54 下午

这两个代码加在哪里啊。怎么一点效果没有..
- 回复万戈说：
  
  2010年01月5日于 12:56 下午
  
  你可以加在footer.php中，但是JQ一定要在JS之前，否则就没效果
  - 回复子强说：
    
    2010年01月5日于 1:08 下午
    
    感谢感谢！！
    
    可以了......
    
    谢谢！。。
回复铵铵说：

2009年12月9日于 3:13 上午

最早是在林那里看到的,挺新鲜,呵呵.
- 回复万戈说：
  
  2009年12月9日于 7:55 上午
  
  林？你是说木木吧，呵呵，他现在不用这个效果了
回复 Leeiio 说：

2009年12月8日于 12:48 下午

呃，在opera下失效？是文字失效还是指只是文字变动了链接打不开？我记得在opera下好像是出现了只改变了文字然后链接却没有打开的情况，所以后来只能改了代码哈。
- 回复万戈说：
  
  2009年12月8日于 12:52 下午
  
  就是在opera下一直停留在Loading状态而不进入页面，刚才看了你的文章，已经修改好了，我也Update了一下，非常非常感谢啊
  - 回复 Leeiio 说：
    
    2009年12月8日于 1:02 下午
    
    哈哈，客气了，还有问题可以直接找我一起商讨的。
    - 回复万戈说：
      
      2009年12月8日于 1:03 下午
      
      恩，好滴，真是热心的大虾呀
回复赢在网络说：

2009年12月6日于 11:59 下午

同是JQuery的爱好者呀。
- 回复万戈说：
  
  2009年12月7日于 8:38 上午
  
  我还只是初学者，算不上爱好者，呵呵
回复 honey 说：

2009年12月6日于 7:02 下午

万戈的站已经全副武装了……
- 回复万戈说：
  
  2009年12月6日于 8:16 下午
  
  那是，追求完美
回复左岸读书说：

2009年12月6日于 3:18 下午

JQuery会不会成为一种标准呢？
- 回复万戈说：
  
  2009年12月6日于 3:24 下午
  
  暂是不会，但是要做出酷站，必须利用JQ
回复古墓候梅说：

2009年12月6日于 3:02 下午

我开始用了，但是感觉不是很好，所以我就去了。
- 回复万戈说：
  
  2009年12月6日于 3:05 下午
  
  我感觉还挺新鲜的呢，所以先用着
回复场子说：

2009年12月6日于 1:13 下午

这孩子长这么大就没吃过蛋糕……快生日了送个祝福吧
【盖楼跟帖▄︻┻┳═一送祝福】板块
回复 QiQiBoY 说：

2009年12月6日于 1:43 上午

不错，正好用在我的一个新主题上。。。哈哈
- 回复万戈说：
  
  2009年12月6日于 8:20 上午
  
  去看了，这是你自制的主题？相当不错啊
  - 回复 QiQiBoY 说：
    
    2009年12月6日于 11:22 上午
    
    将.text方法换成.html，应该可以替换成一张loading图片，那样感觉更好。。
回复 LAONB 说：

2009年12月5日于 10:29 下午

是不是实现了异步调用，那你就火了。
门户都用这个，避免影响速度嘛。
- 回复万戈说：
  
  2009年12月6日于 8:13 上午
  
  是伪异步，哈哈，被我骗到了吧
回复 Yongd 说：

2009年12月5日于 9:41 下午

哈哈，我也要为我的博客加上此功能，赞一个。
- 回复万戈说：
  
  2009年12月5日于 9:42 下午
  
  哈，我刚为留言板又添加了一个记录访客的功能～
回复 eiven 说：

2009年12月5日于 9:07 下午

学习了！Ps 你博客很帅。
我把我的小博改版了，使用lightword主题，有一个小问题请教 view插件的代码不知道添加到什么位置了，我想在主页上显示文章阅读次数，以前我只要添加到index.php的相应位置就可以了，可是这个主题里我搞不懂
- 回复万戈说：
  
  2009年12月5日于 9:11 下午
  
  谢谢～
  其实用法是一样的，添加在你想要的位置就可以了，函数同以前一样
  - 回复 eiven 说：
    
    2009年12月6日于 9:59 上午
    
    如果有空，你下载一下lightword这个主题，看看index里面的内容，跟别的主题差别挺大。找不到位置。
    - 回复万戈说：
      
      2009年12月6日于 10:02 上午
      
      刚下载了，没什么特别啊，不算很变态的主题
      你可以加在第10行，lw_simple_date函数之后～
      - 回复 eiven 说：
        
        2009年12月6日于 10:03 上午
        
        Tks ～我搞一下看看
      - 回复 eiven 说：
        
        2009年12月6日于 10:22 上午
        
        为什么加不到simple_date这个div里面呢？
        
        万戈说：
        
        2009年12月6日于 10:27 上午
        
        你可以修改下lw_simple_date这个函数，在主题的functions.php里的592行起，把你想加在div里的东西添加进去即可
      - 回复 eiven 说：
        
        2009年12月6日于 10:43 上午
        
        加我QQ 29153844
回复江流说：

2009年12月5日于 8:47 下午

每次爬来看你的文我就头疼。。。因为看不明白 - -
- 回复万戈说：
  
  2009年12月5日于 8:56 下午
  
  明天开始写生活篇～
回复 bolo 说：

2009年12月5日于 8:46 下午

还是伪AJAX
- 回复万戈说：
  
  2009年12月5日于 8:55 下午
  
  哈哈，是啊，有效果就行，不管真伪～
回复摸了你说：

2009年12月5日于 7:52 下午

晕初看那2张图我还以为页面载入出错了呢 - -
- 回复万戈说：
  
  2009年12月5日于 7:54 下午
  
  在opera下的确是有错的，还没解决呢
回复 Leeiio 说：

2009年12月5日于 6:56 下午

其實我一直是這麼干的，看來人氣不夠，文章石沉大海啊。
- 回复万戈说：
  
  2009年12月5日于 7:04 下午
  
  当时我就参考过你的那篇文章，但是因为太专业，没怎么看懂
  昨天灵感突现+RP爆发，居然搞定了～
- 回复万戈说：
  
  2009年12月7日于 1:53 下午
  
  有个问题想请教下，我用的这个方法在Opera浏览器中无效，而你的却可以，这是为什么呢？先谢过～
回复三七八蛋说：

2009年12月5日于 4:44 下午

炫的效果要搞，速度也不能丢了。
- 回复万戈说：
  
  2009年12月5日于 6:31 下午
  
  我试了下，不怎么影响效果
回复短歌行说：

2009年12月5日于 3:30 下午

看来我真的落伍了，不会哦
- 回复万戈说：
  
  2009年12月5日于 3:53 下午
  
  这个纯属折腾，呵呵，我也是弄着玩而已
回复阿修说：

2009年12月5日于 2:03 下午

哈哈，挺好的
- 回复万戈说：
  
  2009年12月5日于 2:26 下午
  
  是不错吧，如果整站本来就加载JQ的话，推荐使用试试
回复 619 说：

2009年12月5日于 12:23 下午

水王丢了
- 回复万戈说：
  
  2009年12月5日于 12:30 下午
  
  又被你抢回来了。。。
回复 619 说：

2009年12月5日于 12:21 下午

JQuery跟Page-Exit（页面翻转效果）一样。
严重延迟页面加载时间，建议跟619一样，裸奔！
- 回复万戈说：
  
  2009年12月5日于 12:29 下午
  
  我已经弃用page-exit了。。。jquery我用的也是1.2，精简版
回复 Zenoven自由人说：

2009年12月5日于 12:15 下午

帅啊。。。我还没弄过JS。。。得看看书了
- 回复万戈说：
  
  2009年12月5日于 12:19 下午
  
  我就边学边玩，还没系统地学过JQ呢
回复菠萝说：

2009年12月5日于 11:07 上午

小万真的成了代码控了，哈哈！！
- 回复万戈说：
  
  2009年12月5日于 11:11 上午
  
  哈哈，我本来就是，我承认了
回复 SATURN 说：

2009年12月5日于 10:44 上午

大家都在玩JQuery，效果确实很帅~~
- 回复万戈说：
  
  2009年12月5日于 10:47 上午
  
  效果帅的大多是JQ的杰作，但又怕影响速度
  - 回复 SATURN 说：
    
    2009年12月5日于 10:51 上午
    
    这就是鱼和熊掌不可兼得。。。
    - 回复万戈说：
      
      2009年12月5日于 10:54 上午
      
      是啊，只能尽量取平衡点啦
回复飞晏说：

2009年12月5日于 10:26 上午

JQUERY很强大前台效果好了会不会影响速度啊
- 回复万戈说：
  
  2009年12月5日于 10:36 上午
  
  主要是JQ的问题，我选择了1.2的版本，再加上gzip，尽量压缩在了13K以内，对速度影响不会很大
回复翎峋说：

2009年12月5日于 10:19 上午

这个会托慢加载速度吧，万戈不是速度狂吗？
- 回复万戈说：
  
  2009年12月5日于 10:35 上午
  
  会是会一点，速度狂已经转型了，执着于速度不利于今天的发展，嘿嘿
回复 Auston Jary 说：

2009年12月5日于 9:35 上午

国家显示错误？？？
- 回复万戈说：
  
  2009年12月5日于 10:34 上午
  
  国家错误已经不是第一次了。。。。
回复 Auston Jary 说：

2009年12月5日于 9:34 上午

研究的技术的还真多，，，
- 回复万戈说：
  
  2009年12月5日于 10:34 上午
  
  好技术，就是要折腾，哈哈
回复 ShuaiGe.Me 说：

2009年12月5日于 9:24 上午

木木，小邪，万戈你，都加了
我还在等什么呢？
- 回复万戈说：
  
  2009年12月5日于 10:33 上午
  
  现在发现一个小BUG，就是在opera下没效果
回复 Never summer 说：

2009年12月5日于 1:47 上午

話說這個JS我是在leeiio裏面看到的我也用了……
- 回复万戈说：
  
  2009年12月5日于 6:58 上午
  
  我看了他的效果，好像更完美一些，等会去讨教两招
回复小农夫说：

2009年12月5日于 1:12 上午

没有想到WP的东东这么牛
- 回复万戈说：
  
  2009年12月5日于 6:57 上午
  
  不能算是WP的，是JQ的技术，其他Blog或者网站也都能用上
回复超人说：

2009年12月5日于 12:13 上午

研究的技术还真不少啊。看来你那公司事情不多呀~~
- 回复不許起名。说：
  
  2009年12月5日于 2:22 上午
  
  你好，同是袋鼠國的人~
  - 回复万戈说：
    
    2009年12月5日于 6:55 上午
    
    啊！！！不是这样的，是插件BUG，国家显示错误～
    或者说超人开了代理来留言？
    - 回复蓝冰说：
      
      2009年12月5日于 8:50 上午
      
      哈哈
  - 回复 Awu 说：
    
    2009年12月5日于 8:48 上午
    
    哈哈，这两个强，去澳大利亚了～～～
- 回复万戈说：
  
  2009年12月5日于 6:59 上午
  
  上班时我哪敢研究这些呀，但是回家后搞的
回复 winy 说：

2009年12月5日于 12:07 上午

今天刚看到，正在学习中，不过这个地方的更强大：http://leeiio.me
顶上的进度条不错
- 回复万戈说：
  
  2009年12月5日于 6:56 上午
  
  恩，这家伙也是个牛人，真正的牛人啊
回复我心疯狂说：

2009年12月4日于 11:58 下午

学习了，改天借用下
- 回复万戈说：
  
  2009年12月5日于 6:55 上午
  
  哈哈，借吧，我也是刚借来的
回复 zwwooooo 说：

2009年12月4日于 10:37 下午

不懂就学我做CP党嘛，有啥好怕的？
- 回复万戈说：
  
  2009年12月5日于 6:53 上午
  
  我本来就是一个不折不扣的CP党，哈哈
回复老饕说：

2009年12月4日于 10:12 下午

试效果！
- 回复老饕说：
  
  2009年12月4日于 10:18 下午
  
  感觉这样的话，没什么必要啊！
  - 回复万戈说：
    
    2009年12月5日于 6:53 上午
    
    增加用户体验，怕有人等不及打开先跑了
回复 JohnnY 说：

2009年12月4日于 10:09 下午

内牛满面的膜拜，再飘过。。。
- 回复万戈说：
  
  2009年12月5日于 6:52 上午
  
  呵呵，不用膜拜啊，这个不难，你也可以
回复小y 说：

2009年12月4日于 9:57 下午

使用了。俺全部都替换了。。邪恶的插入中。。
- 回复万戈说：
  
  2009年12月4日于 9:59 下午
  
  ...我没看到你有用啊
  - 回复小y 说：
    
    2009年12月4日于 10:03 下午
    
    用了的。。只是刚刚忘记替换日志的CSS了。。
回复 SorryDreams 说：

2009年12月4日于 9:37 下午

传说中的jquery适合万戈这样的人折腾，自从上次改ajax和js改的头疼后对js就有畏难情绪了。
- 回复万戈说：
  
  2009年12月4日于 9:48 下午
  
  我看到JQ也头疼，不过这个还好，不算太难，就用上了
回复 evlos 说：

2009年12月4日于 9:13 下午

呵呵，叫我小邪就好 ~
刚才看了《2012世界末日》~
好大一个杯具啊 ~
更杯具的是结果就前排没座位了 ~
哈哈围观张三那个沙发狂人 ~
- 回复万戈说：
  
  2009年12月4日于 9:24 下午
  
  《2012世界末日》和《2012》不是一个电影吧～
  张三有我内幕，哈哈
  - 回复 evlos 说：
    
    2009年12月4日于 9:30 下午
    
    喔 ~~~ 原来如此 ~
    因为高不清楚是不是同一部 ~
    我就结了老半天 ~
    呵呵多谢解惑 ~
    嘿嘿 ~ 貌似张三有很多人内幕 ~
    - 回复 evlos 说：
      
      2009年12月4日于 9:32 下午
      
      万恶的错别字 ~ 万恶的输入法 ~
      ╮(╯▽╰)╭ 盖这么多层楼是天意啊 ~
      ------------- 重发原来的可以删掉 ---------------------
      喔 ~~~ 原来如此 ~
      因为搞不清楚是不是同一部 ~
      我纠结了老半天 ~
      呵呵多谢解惑 ~
      嘿嘿 ~ 貌似张三有很多人内幕 ~
      - 回复万戈说：
        
        2009年12月4日于 9:34 下午
        
        哈哈，没关系，我有纠错功能
    - 回复万戈说：
      
      2009年12月4日于 9:32 下午
      
      《2012世界末日》我也看过，比《2012》差太远了
      据说《2012》有高清了，你试试吧：
      http://htwy.org.ru/article/film/2012-dvd.htm
      - 回复 evlos 说：
        
        2009年12月4日于 9:46 下午
        
        收到，多谢，光速打开。
回复笑话说：

2009年12月4日于 8:57 下午

过来占个座，签个到~~
回复张三说：

2009年12月4日于 8:52 下午

抱歉抱歉~~~老万，习惯了。先抢一个……
回复张三说：

2009年12月4日于 8:52 下午

先占上了~~虽然不光彩……
- 回复万戈说：
  
  2009年12月4日于 8:53 下午
  
  沙发从这里算起
回复张三说：

2009年12月4日于 8:51 下午

1231231231
- 回复万戈说：
  
  2009年12月4日于 8:52 下午
  
  我宣布，此沙发无效
  - 回复张三说：
    
    2009年12月4日于 8:53 下午
    
    无效？！那我这么多，随便哪个都可以。。

Life Studio