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
不錯支持下啦