为跳转添加加载提示

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

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

代码很简单,如下:

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

1
2
3
4
5
6
7
8
9
10
11
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');
    });
});

由于以上代码是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的解决方法,将上面代码修正如下:

1
2
3
4
5
6
7
8
9
10
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');
    });
});


再次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. @毕业生, 其实是很简单的东西,不过没接触过而已;所谓隔行如隔山

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

评论已关闭。