「網頁載入中，請稍候．．．」的簡單作法

2007/05/02 |

分類： Blog工具箱

| 點擊數: 4 / 6621

Loading image

隨著自由欄位的越來越五彩繽紛、五花八門之後，網頁載入的速度也越來越慢。為了提示讀者耐心等候，特別加了個「載入中」的小框，就像AJAX技術常見的樣式一般。以下說明我在 Xuite 裡達成的方法與步驟。

首先在顯示在最上面的自由欄位裡加上如下HTML標籤：


  
  網頁載入中，請稍候...

基本結構就是用一個區域(div，division)把圖形和載入中的文字包在一起，因為是放在第一個自由欄位裡，所以會在很早的時間裡就執行到而顯示在自由欄位上方50像素的位置(top: -50px)。因為這段HTML是放在第一個自由欄位裡，自由欄位的左上角就是座標 (0,0)，要將此區域向上移動就是把底端用負值即可，此例中我把位置向上移了50個像素(-50px)。

類似AJAX的「載入中」圖形在網路上可以找到不少，其中AJAXLoad是一個能自行設定的圖形產生網頁，可依需求指定圖形的樣式與顏色等；如果您懶得去找或用產生器的話，以下是一些我上載好的：

	http://b.blog.xuite.net/b/3/a/c/11893557/blog_10351/txt/11293067/7.gif
	http://b.blog.xuite.net/b/3/a/c/11893557/blog_10351/txt/11293067/0.gif
	http://b.blog.xuite.net/b/3/a/c/11893557/blog_10351/txt/11293067/9.gif
	http://b.blog.xuite.net/b/3/a/c/11893557/blog_10351/txt/11293067/8.gif
	http://b.blog.xuite.net/b/3/a/c/11893557/blog_10351/txt/11293067/6.gif

最後在任何一個自由欄位裡設定window.onload事件，在此事件裡把顯示出來的區域(divLoading)的顯示樣式變成
"none"，則「載入中」的框框就消失了。

您可能也會有興趣的類似文章

用樣式控制Google AdSense廣告顯示的位置 (13則留言, 2007/05/03)
在Xuite測試 jQuery (0則留言, 2007/09/12)
在Blog裡顯示隨機文章的簡單作法 (3則留言, 2007/10/14)
對Xuite的小小抱怨 (8則留言, 2005/06/03)
修改自動產生分享書籤的按鈕 (4則留言, 2007/02/11)
Xuite再度變身！ (0則留言, 2007/08/31)
[Xuite] 加上Flash的時鐘顯示(範例在右方) (8則留言, 2005/04/24)
Xuite網址的正規運算式測試 (1則留言, 2007/04/30)
Blog側邊欄改用iframe以提升網頁載入速度 (2則留言, 2008/07/06)
[Xuite] 變更頁首(Banner)的圖片 (修正) (1則留言, 2005/04/09)
本部落格的連線速度問題 (1則留言, 2007/12/31)
幫Xuite增加單篇文章的雙擊快速編輯功能 (1則留言, 2007/08/15)
[Xuite] Xuite上的空間又多了500MB (1則留言, 2005/05/15)
[工具] Xuite人氣統計網頁 (5則留言, 2007/09/16)
[Blog] 加入Furl與del.icio.us的連結 (0則留言, 2005/03/04)

哈啦公主HALA_PRINCESS

2007/05/02 於 16:13:51 » 留言

你好~要跟你請教怎麼把googlee adsense橫幅放進BANNER上,謝謝!

Nelson

2007/05/02 於 16:53:44 » 留言

這個有趣，我拿去放在我的 blog 囉，謝謝

簡睿

2007/05/03 於 01:19:15 » 留言

To Hala_princess:表頭區的要再加一個區域指令：// 你的AdSense script細節容晚上再述。

Rous

2007/05/03 於 10:01:08 » 留言

我讀取你的網頁的時候,發現載入中的圖不會消失耶~

2007/05/03 於 11:23:34 » 留言

To Rous,文章裡的圖是說明用的, 是不會消失的。但載入時網頁頂端出現的圖形才會消失,載入完成後原來位置會被AdSense的連結廣告取代。不然就是還沒載入完成…

2007/05/03 於 15:10:02 » 留言

To 哈啦公主HALA_PRINCESS:把廣告顯示在banner的作法請參考：http://blog.xuite.net/emisjerry/tech/11399987To Rous:IE的載入似乎要很久, 但FireFox則較正常…我會再觀察看看。Thanks.

2007/05/04 於 04:38:52 » 留言

原來是文章的圖阿~~XD XD XD

Rael

2007/05/08 於 15:49:22 » 留言

您好, 我引用了您這篇文章, 並做了小小修改, 放在我的部落格裡面.http://raeltw.blogspot.com/2007/04/so-sorry-let-me-test-javascript.html謝謝您.

傑森

2007/05/08 於 21:49:11 » 留言

不錯的應用！推！推！

sfcarter

2007/05/19 於 05:06:42 » 留言

感謝，非常好用～上手ing^^

Jay

2007/07/02 於 13:00:38 » 留言

有時會有問題:不會消失

︴藍色．射手☆〞

2007/07/17 於 14:12:03 » 留言

我拿來放到我的部落格囉~^^你寫的程式真是實用XD

Paul

2007/10/05 於 13:32:02 » 留言

請問一下，這個HACK套在我的BLOG裡，有時進入首頁會是亂碼，只要重新整理就OK了。或是進入單一文章閱讀，回到首頁又是亂碼。請問是我BOLG的任何問題嗎？可以如何修正呢？我的語法：網頁載入中… function init( ) {_oTag = document.getElementById("divLoading");_oTag.style.display = "none" // hide it.}if (window.attachEvent) {window.attachEvent('onload', init);} else {window.addEventListener('load', init, false);}多謝JERRY。

2007/10/06 於 06:48:39 » 留言

其實我也不曉得是為何，有時會這樣，有時又不會，也不知是否是IE的問題，不過還是很謝謝JERRY的回覆。

Danny

2008/03/07 於 10:22:53 » 留言

這個功能也不賴，但有個小缺點，就是如果在載入廣告的過程中出了狀況(例如google沒回應)，那這個標籤就不會消失……

2008/03/07 於 15:44:48 » 留言

雖然我不懂javascript，但因為自修過一點程式設計，所以勉強看了看程式碼，發現這些的功能要起作用，都得要呼叫你放在googlepage的js檔，但你也知道，通常免費空間對流量是會有些限制的，而你的學生這麼多，每個都拿你的程式碼來套用，結果就是有大量的網站在呼叫你的js檔，很可能就是因為這樣才會三不五時地就連不上，這個請稍候自然也就不會消失囉，所以也許你該建議你的學生們自己申請一個免費空間，然後把你的js檔存過去，然後修改呼叫的位址，如此一來你的網站應該會運作順暢些

Tsuziai

2008/06/25 於 11:33:53 » 留言

好多好有用的東西!!!!!!!真開心!!!!!!：目