为跳转添加加载提示

loading直观地来说，就是指左边所展示的这玩意。这个东西很多博客上都有，而且添加起来也是一件很简单的事情。

我这里只是对博客文章post内的链接添加，别的没有。

代码很简单，如下：

将以上代码加到主题中的JS文件即可。

[ccewln_javascript]
jQuery(document).ready(function() {(‘.post a’).click(function(){
var text = (this).text();(this).fadeOut(‘slow’)
.text(“正在努力加载…”)
.fadeIn(‘slow’)
.delay(3000)
.fadeOut(‘slow’, function(){$(this).text(text);})
.fadeIn(‘slow’);
});
});
[/ccewln_javascript]

由于以上代码是jQuery的，所以必须保证在主题的JS文件前已加载了jQuery库，如果还没，可以使用

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

来加载google托管的jQuery库；或者加载自己博客上的jQuery库。

Update:

P.S. Opera的10.70对jQuery的.text()支持存在问题，点击后不会跳转了；别的版本我没有测试；Chrome、Firefox和基于IE8和基于其的浏览器经测试通过。至于Opera的问题，先暂时搁着，找找看看如何解决。

在万戈那里找到了Opera的解决方法，将上面代码修正如下：

[ccewln_javascript]
jQuery(document).ready(function() {(‘.post a’).click(function(){
var text = (this).text();(this).fadeOut(‘slow’).text(“正在努力加载…”).fadeIn(‘slow’);
window.location = (this).attr(‘href’); //解决Opera问题(this).delay(3000)
.fadeOut(‘slow’, function(){$(this).text(text);})
.fadeIn(‘slow’);
});
});
[/ccewln_javascript]

再次Update

由于为了解决Opera点击后不会加载的问题而使用了window.location，可是引进了新的问题，那就是如果链接带有target="_blank"的话，那么除了在新窗口打开链接外，当前窗口也会跳转到链接目的地。

所以，在未找到解决方法前，有两种选择方案：

  1. 使用第一种代码，不会导致2个窗口皆转到新链接的问题，但Opera会点击链接无法进入目的地；
  2. 使用第二种代码，将选择符.post a改为.post h2 a之类（对应主题修改）的将其限制为仅对标题使用加载提示效果。

8月4号Update

另一种解决方法，那就是无视opera，不对其启用提示功能，这样子就不需要启用windows.location，也就不需要应对新窗口打开的问题了。具体做法就是在第一种代码的var text = $(this).text(); 前插入以下代码：

if($.browser.opera) return;

 

小注意：

这只是简单的做法，没有对图片链接进行过滤，所以会导致点击图片也会用文字来替换了图片。

总结下来就是，最好只对标题使用提示效果，内文就不大需要了（即第二种做法）。

73条评论

    1. @Mucid, IE的话应该是某些支持不好，jQuery以为抽象了底层，一般来说各个浏览器都支持，不过某些特性是会存在问题的。不过这次好像是Opera的问题，IE到是没问题

            1. @Mucid, 感觉jQuery在这方面做得很好哦，基本看名字就知道什么意思

    1. @洁, 很多博客都有这个或类似的，我是现在才加上去的，而且还不怎么完美

    1. @reizhi, 大概是你没加载jQuery库或不是在新增代码前加载

        1. @reizhi, 如果你有缓存的话，需要ctrl+f5强行刷新后才会加载新的内容的，否则浏览器会优先读用本地的缓存内容；嗯，你可以使用万戈的代码看看：http://wange.im/loading-effect-by-jquery.html

            1. @reizhi, 呵呵，总不能因为这个而弄得你苦恼嘛

        2. @reizhi, 看见有了，不过有乱码，你应该保存为utf8格式（windows下编辑过的会默认是gbk，需要另存为选择格式）

        3. @reizhi, 另，我更新了代码以用来解决opera的问题，你也更新一下吧

        4. @reizhi, 突然发现，我为了解决opera的问题而引出了一个新的问题，还要琢磨琢磨；
          另，如果你想只对标题使用以上效果，对于你的主题，选择符可以用.post-title a来代替.post a

        5. @reizhi, ➡ 再说一句，因为新问题没解决，所以你可以使用我一开始的代码（这样opera会有点问题）；另一种就是使用修改后的代码，然后只对标题使用以上效果。

    1. @毕业生, 其实是很简单的东西，不过没接触过而已；所谓隔行如隔山

  5. 光是搞IE6,7,8的兼容问题就狗头大了，Firefox也来凑热闹，加上现在还有Chrome、Opera和Safari，头都晕勒~~！！！

    1. @人好哇！, 非IE系列一般都比较好调，主要是IE系列有很多hack的东西，我基本都不懂

  6. :mrgreen: 看到流年更新 折腾文章了 哈哈 看样子最近这段时间少不了折腾。

    1. @7cbt, 嘿嘿，这可难说，一时懒了就 :mrgreen: :mrgreen:

        1. @7cbt, 嘿嘿，上网可以纯粹无聊着度过的

    1. @丕子, jQuery是很好的，嗯，需要慢慢学习；至于Ajax ，也是个很伟大的技术，不过不能滥用，用多了好像对搜索引擎不是很友好（因为url不变化）

    1. @trylife, 呵呵，没有，这个主要是提示一下页面正在加载以免重富点击，嘛，可以说得上是一种好的用户体验吧。
      想要加速的话还是得采用例如gzip压缩，优化代码，进行缓存等工作，可以参考一下我的这篇文章：http://liunian.info/beautify-and-optimize-wordpress.html，里面也有别人的优秀文章的链接，可以看一下

    2. @trylife, 话说你的网站速度很不错 😉

      2. @流年, 其实你的博客我一下子就打开了
        我的还要等这才能慢慢展现～
        你这个英国主机 挺快～

        1. @trylife, 我做了优化的，刚刚又加了个缓存的，将查询次数减少了大概一半

          1. @流年, 店长，原来如此，那个add-loading-when-click-hyperlink.html是真的HTML不

            1. @trylife, 不是，只是重定向固定链接为此而已

  11. 哈哈，好一个新玩意，刚刚看到这个，的确是惊奇了一下。博主蛮有研究实践精神的吗。哈哈。。。

    1. @原子博客, 🙂 这个玩意很多博客网站都有，我是小小尝试一下

  15. 呵呵 之前也看L 在弄 折腾了半天还是没弄好 后来也就放弃了 😆

    1. @指舞六弦, 主题没有就用google的（好像主题是有的，不过挂载方法不是普通这样子的）

    1. @Leyond, 我不是高手呢。高手要看万戈、木木等等等等

  24. 问一下，我成功了，但是一点击图片~不是放大，而是进入了~你可以到我空间看一下~这个要怎么解决呢？
    过滤什么标签呢？

    1. @blueandhack, 对于你那个，可以将(‘.post a’).click(function(){ 改为(‘.post a:not(:has(img))’).click(function(){
      如果你只想对标题使用加载提示效果，可以使用$(‘.post-title’).click(function(){

    1. @blueandhack, 因为我使用淡入淡出，你将.fadeOut()、.fadeIn()这些去掉就可以了

      1. @流年, ❗ 你加的淡出淡入……看来我要好好学学jq了~~有什么好书没有？给个传送门~

评论已关闭。