jQuery 真是一个非常伟大的 javascript library，至少在我不会写 JS 的时候第一时间接触了它，虽然还有其他很多优秀的 javascript library，但是目前我还是对其情有独钟，它让你的网站显得更加酷，同时在一定程度上给了用户不错的视觉体验…
有时候浏览器变得缓慢或者网络十分缓慢的时候，当你点击了一个链接，你要做的就是对着页面傻看着，页面既不刷新，也没有任何提示，并没有给用户一个好的引导。一些并不是网络从业者的访客可能都不知道你的网站到底怎么了，明明点击了链接却没有反应，从而造成了不好的印象。所以我觉得，为什么不给出一些提示来告诉他们页面正在加载中呢(当他们点击了某个链接的时候)。
$('a').click(function(){ $(this).text('loading...'); }); |
以上这段代码就是改变你所点击的链接的文本为 loading…当然你如果只想让局部的链接有这种效果的话，自己去选择对象吧。
也许你也已经注意到本站在点击链接的时候，除了链接文本变为 loading…之外，还会在左上角弹出页面加载的提示，虽然都是些噱头的功能，但是无疑会让用户觉得很眩，多少会吸引用户的注意力从而让等待显得不那么漫长。
我的做法是在你的模板里放置如下代码( CSS 自行控制，别忘了让其绝对定位到顶部)：
<div id="clickload">页面假装异步加载中...</div> |
然后就是使用 jQuery 来控制以上的 Div 的显示：
$('a').click(function(){ $(this).text('loading...'); $('#clickload').show(); }); |
不过有一点要提醒的是，显然你不能对全站的 a 链接都启用这个效果，因为还有一些 a 链接是在新窗口打开外链或者是 # 或者是 javascript 的，当你点击那些链接的时候当前页面显然不会跳转到新的页面，那么左上角弹出的提示显然也不会被刷新掉，所以你需要对 a 进行过滤。
我只做了简单的过滤，排除了那些新窗口打开的外链
$('a[href*="http://leeiio.me"]') |
当然具体还得因你自己的站而对 a 进行筛选，你可以选择只针对侧边栏的链接啊或者导航链接啊或者只是文章标题等。
很简单对吧，说了只是小细节了。谢谢大家捧场！
2009.11.11更新：增加鼠标中间点击链接的事件捕获处理。(顺便祝广大光棍朋友早日“脱光”！)
当你用鼠标中键新窗口打开链接的时候还是会触发事件，导致文字变成“Loading…”，那么我们就要对鼠标的事件进行处理了，处理的代码如下：
$('a').click(function(e){ if(e.which == 2){ return true; }else{ $(this).text('loading...'); $('#clickload').show(); } }); |
2009.11.22更新：页面由window.location打开。
不知道为什么，在IE和Opera中用jquery的click(fn)函数，会丢失默认的事件也就是只执行了click(fn)函数里面写的事件，而默认的打开页面的事件丢失了，Firefox和Chrome都是正常的。不知道是不是jQuery函数的问题，往知情者告知哈。现在的解决方案代码如下：
$('a').click(function(e){ if(e.which == 2){ return true; }else{ $(this).text('loading...'); $('#clickload').show(); window.location = $(this).attr('href'); } }); |
晚饭前最后一顶!!!!
等我去实现一下先！
晚饭前来崇拜一下Leeiio~ 😳 😳
这样也要哇
JQuery 简单易用，确实很值得去学习。
good idea!
我也去实现一下
你的效果挺有意思
有时间测试下
呵呵 有点意思 哈！！ 学习学习 ！！！
不错哦，马上应用上去。有没好的jquery tabs推荐啊 jquery.ui太大了。
@chisdy
只是一个tabs么？类似我文章后面的那种？
不错，学习啦
博主，你好，想请教一下，如果我只想对导航和标题使用这种效果应该修改代码的哪个部分呢？
@sck
把$(‘a’)换成$(‘#navigation a’)即可~
我也加入這個功能了 你真的好厲害啊 哈哈 崇拜一下
還有 如果我用鼠標中鍵新窗口打開的話 文字也會變loading=。=
不知道這個有沒有辦法改善
@Never summer
文章已经更新，注意最后部分有惊喜。
@Leeiio
哇好厲害 改過了～十分感謝～
leeiio大大
再次提一個問題
更新過后的代碼用上之后
在IE下點擊鏈接一直提示“loading”，必須再點擊一次才可以
而在opera下面怎么點擊都一直出現“loading”
FF和chrome下正常。
@Never summer
已更新解决方法，但是我仍在困惑中。
😀 Awesome~
麻烦问下博主，如何过滤页面内不需要刷新的带#的链接。
@熊猫
用jquery的话是a:not([href^=’#’]，意思就是去掉#开头的href属性的a对象，如果想去掉包含#而不是开头#的话就用a:not([href*=’#’]，可以看手册 http://jquery.leeiio.me
@Leeiio
谢谢leeiio
Pingback: 首页添加页面载入中提示效果 » Life Studio
哈，我的用时间控制新窗口打开后父页面复原，你的方法比我的好多了，直接CP你的好了，哈哈
@zwwooooo
哈，毕竟时间控制是个取巧的办法。
我也试试看~~~O(∩_∩)O哈哈~ 😮
Pingback: 无折腾，不WP
搞了半天是个flash啊 晕 呵呵
这些代码是放在哪里的？是头部吗？
@blueandhack 随便哪儿…只要能调用到
Pingback: 点击改变链接文本 - ReMind
不错支持下啦