敗家。紀錄

敗家紀錄、開箱評測、好物推薦、時尚精品、生小惡魔

樂趣。玩具

有趣玩具、酷搜搞笑、幽默小品、樂活人生、搞笑影片

生活。心情

生活心情、饕客美食、遊山玩水、動漫音樂、電影欣賞

知識。常識

實用知識、遺忘常識、職場技巧、投資方式、理財規劃

軟硬。兼施

程式設計、軟體教學、硬體效能、部落優化、網站資源

Twitter It! Plurk this! Share to Facebook!
首頁 » 軟硬。兼施

調用JavaScript特效實作(頁面載入進度條篇)

作者： 於 2009年06月29日 星期一 13:26:10 | 觀看次數：27 則迴響

頁面加載進度條

之前曾提過中華電信TPE海纜已經完工，所以公司行號或一般家庭網路連美國境內1速度尚在可接受範圍內，但對於學校所使用的學術網路就不是這麼一回事了。有鑒於多位網友反應學術網路開啟網頁會很慢，諾就先放上進度條吧2，慢歸慢至少知道網頁加載到哪裡了，等起來也許能快樂些(囧)。

在諾沒砸大錢換台灣主機之前，如果要速度快，那就用非學術網路連吧。XD

連同先前的jQuery三連彈「調用jQuery特效實作(隱藏迴響欄位篇)」、「調用jQuery特效實作(Tab控件篇)」、「調用jQuery特效實作(MP3控件篇)」之後，大家對於JavaScrpit的調用應該很熟悉了。這篇是單純調用JavaScript特效的實作，也是簡單的幾個步驟就能實現了，我們就一步一步的來實作吧~*

步驟一：導入JavaScript程式及CSS語法

JavaScript程式及CSS語法可從此處下載(6KB)或由官方網站下載。檔案解壓縮後放置於您主機上或方便運用的空間。將下面語法複製貼於head開始與結束標籤之間的適當位置：

1
2

<!-- 調用頁面載入進度條 -->
<script src="http://您空間的網址/loadingbar.js" type="text/javascript"></script>

CSS語法可自行添加於style.css中或導入loadingbar.css檔，擇一使用即可：

<!-- 導入頁面載入進度條CSS -->
<link rel="stylesheet" href="http://您空間的網址/loadingbar.css" type="text/css" media="screen" />

步驟二：於body開始處，導入Loadingbar的Flash檔。

1
2
3
4
5
6
7
8
9
10
11
12

<body>
 
<!-- 調用頁面載入進度條 -->
<div id="loadingbar">
<object id="loadingBarFlash" type="application/x-shockwave-flash" data="http://您空間的網址/loadingbar.swf" width="100%" height="50">
<param name="movie" value="http://您空間的網址/loadingbar.swf" />
<param name="BGCOLOR" value="" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object>
 
</div></body>

如果想變更Flash顯示的顏色可自行補上這行：

1

<param name="FlashVars" value="textColor=0xFFFFFF&bgColor=0x303030&loadingBgColor=0x404040"></param>

從左到右依序為：文字顏色、載入完畢的背景顏色、正在載入的背景顏色。

步驟三：根據自己網站的實際情況來顯示進度條。

EX：第一步要載入頁首，則緊跟著寫入：

1
2
3

<script type="text/javascript">
callLoadingBar(5,""," 頁面載入總進度： "," 正在載入頁首 ");
</script>

這段函數的是為了調用FLASH LOADING來顯示相關訊息用的，第一个參數5表示現在約載入了5%；之後第二個參數是顯示在最前面的說明文字，第三個參數是顯示在5%前面的文字，比如用「約載入了」或者「載入了」，最後一個參數是表示現在正在載入什麼內容。FLASH LOADING會根據這些來顯示相關的訊息與進度、百分比。下面要做的就類似了，比如在JavaScript程式庫載入之前加入：

1
2
3

<script type="text/javascript">
callLoadingBar(15,""," 頁面載入總進度： "," 正在載入JavaScript程式庫 ");
</script>

載入頁首圖片之前加入下列語法：

1
2
3

<script type="text/javascript">
callLoadingBar(35,""," 頁面載入總進度： "," 正在載入頁首圖片 ");
</script>

載入分類導航之前加入下列語法：

1
2
3

<script type="text/javascript">
callLoadingBar(45,""," 頁面載入總進度： "," 正在載入分類導航 ");
</script>

依此類推...完成所有載入後，在頁面的最底部，body結束前加入：

1
2
3
4

<script type="text/javascript">
callLoadingBar(100,"載入完畢 "," 頁面載入總進度： ","");
closeLoadingBar();
</script>

FLASH會根據載入的百分比自動調用closeLoadingBar()來關閉左上角的進度BAR。
如果網站有使用jQuery程式庫，最後結束時也可以選擇調用jQuery的平滑移出效果：

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
callLoadingBar(100,"載入完畢 "," 頁面載入總進度： ","");
jQuery("#loadingbar").animate({
	top : "-5"
}, 3000, function() {
	jQuery("#loadingbar").animate({
		top : "-50"
	}, 2000, function() {
		jQuery("#loadingbar").empty().hide();
	});
});
</script>

具體加入的位置可檢視原始碼來參考修改它。^_^

參考及引用連結：

GL~19' Life. - 模擬頁面加載的進度條
King's blog | 月亮上的妖精 - jQuery 頁面載入進度條

  1. 諾的主機位於美國德州。 [↩]
  2. 就甘心ㄟ [↩]
標籤：, , , ,

27 則迴響 »

  • 第1則 迴響由 Marty Windows XP Firefox 3.0.11 發表：

    這篇好像不錯耶!等我的BLOG回來時我也來試看看!

    - 於 2009 年 06 月 29 日 15:05:03
  • 第2則 迴響由 書偉 Windows XP Internet Explorer 6.0 發表：

    諾哥，我是書偉啦~
    最近做了一個網站http://www.da-jing.com.tw/
    在作品集那邊的連結連出去常有人說看不到耶
    也有時候整個網站都看不到，好像是編碼上有問題，
    可以請教你怎麼解決嗎?

    - 於 2009 年 06 月 29 日 15:49:43
  • 第3則 迴響由 拆組達人 Windows XP Google Chrome 2.0.172.33 發表：

    也許我也該來裝看看？

    - 於 2009 年 06 月 29 日 17:25:19
  • 第4則 迴響由 小笠 Windows Vista Firefox 3.5 發表：

    諾 真厲害
    連這個也弄出來了

    - 於 2009 年 06 月 29 日 21:33:50
  • 第5則 迴響由 阿諾 Windows XP Firefox 3.0.11 發表：

    To Marty

    嚴防網路蜘蛛，流量200G是很可怕滴，預祝網站快快復原。XD

    To 書偉

    幫你看過了，已經回覆在MSN中嚕，有空去改改吧。^_^

    To 拆組達人

    是啊，諾覺得這是美國主機專門弄給學術網路得人看的。 :mrgreen:

    To 小笠

    不厲害啦，諾也是看來的，照本宣科而已。 😀
    實作分享兼筆記文，一兼間二顧，摸蚵仔兼洗褲。XD

    - 於 2009 年 06 月 30 日 02:40:53
  • 第6則 迴響由 shooter Windows XP Internet Explorer 7.0 發表：

    我還是看不懂怎麼用ㄝ
    要把語言碼加在哪個文件裡

    - 於 2009 年 07 月 02 日 13:43:33
  • 第7則 迴響由 阿諾 Windows XP Firefox 3.5 發表：

    To shooter

    對HTML架構熟悉一點的話，找head、body應該不難。
    進度的程式碼會遍佈整個WordPress佈景！對自己佈景不熟的話，不建議修改喔，因為幾乎所有位置的檔案都會加到。

    文章中的參考連結可以先看過一便，會比較清楚佈景載入的順序。^_^

    - 於 2009 年 07 月 02 日 14:15:41
  • 第8則 迴響由 仔仔 Windows XP Firefox 3.0.11 發表：

    不過我有時候用ie8的時候會出現死網頁的問題...
    之後我用ff和ff ie tab 就暫時沒有事...
    所以我都是以ff開 諾的敗家誌.><~唉

    - 於 2009 年 07 月 02 日 23:52:37
  • 第9則 迴響由 梅干扣肉 Windows XP Firefox 2.0.0.20 發表：

    諾大也有在玩jQuery呀~~
    這範例挺不賴的~

    - 於 2009 年 07 月 03 日 09:13:32
  • 第10則 迴響由 阿諾 Windows XP Firefox 3.5 發表：

    To 仔仔

    IE8會不時出現死網頁應該是Google Friend Connect的關係。 :mrgreen:
    FireFox、Chromium、Safari都顯示的好好的，諾只能說IE瀏覽器真是爛啊...

    To 梅干扣肉

    噗，之前連續發過三篇jQuery的實作了說。 ❗
    這篇其實都是JavaScript，jQuery只有用在平滑移出效果，或是直接關閉。XD

    - 於 2009 年 07 月 03 日 09:58:02
  • 第11則 迴響由 小蘋果 Windows XP Internet Explorer 7.0 發表：

    諾真的很厲害耶,不知痞客的平台是否也可以用?

    - 於 2009 年 07 月 05 日 19:06:37
  • 第12則 迴響由 佶也 Windows XP Firefox 3.5 發表：

    這是佶也
    上次幫忙
    測試的嗎?

    - 於 2009 年 07 月 06 日 11:12:08
  • 第13則 迴響由 阿諾 Windows XP Firefox 3.5 發表：

    To 小蘋果

    諾沒用過痞客的BSP，不過痞客如果有開放Javascript的使用跟版面配置的話，就能用喔。

    To 佶也

    嗯，是呀！就是這個。^_^

    - 於 2009 年 07 月 06 日 11:30:20
  • 第14則 迴響由 殺氣 Windows XP Firefox 3.0.11 發表：

    蠻炫的 不過
    最怕的是用的是美國主機 本身就有點慢 在加上這個 不知會不會給他又更慢

    阿諾還蠻強的 整個佈景可以說是 超好看 羨慕你中

    - 於 2009 年 07 月 07 日 18:00:39
  • 第15則 迴響由 阿諾 Windows XP Firefox 3.5 發表：

    To 殺氣

    慢倒是不會，因為它只有5~6KB而已。 🙂
    諾不強，全部都是網路上學來的。XD

    - 於 2009 年 07 月 08 日 09:37:28
  • 第16則 迴響由 xD~碳 Windows XP Internet Explorer 6.0 發表：

    碳碳對於「head」放在WP的哪個檔案都不知道，
    裡面都是PHP語法，所以也搞不清楚哪個可以改，
    萬一改個不好就完蛋(雖然有備份啦，但是步驟一直錯誤也不好)

    諾可以跟碳碳說要改哪個部分嗎?感謝囉！^^

    - 於 2009 年 07 月 13 日 15:42:31
  • 第17則 迴響由 阿諾 Windows XP Firefox 3.5 發表：

    To 碳碳

    「head」沒意外的話，通常都在header.php中。 🙂
    要注意進度百分比的程式碼會遍佈整個WordPress佈景喔，所以每個檔案你幾乎都會加到！

    - 於 2009 年 07 月 16 日 02:44:18
  • 第18則 迴響由 shooter Windows XP Internet Explorer 8.0 發表：

    我用了以後Forefox顯示正常
    但是IE8會顯示但是不會動
    網頁讀取完畢也不會消失
    是這個檔案的問題嗎
    -------
    這需要導入jQuery程式庫嗎?
    佈景不一樣會不會有關係

    - 於 2009 年 08 月 24 日 14:46:57
  • 第19則 迴響由 阿諾 Windows XP Firefox 3.5.2 發表：

    To shooter

    檔案都是一樣的，應該是哪邊設定錯誤了。 😮
    你測試我的站應該都是正常的喔。IE6、7、8、Firefox、Chromium、Safari諾都測試過了，都是正常的唷。^_^
    -------
    基本上這個只需調用JavaScript，jQuery的部份並沒使用到。
    當然最後關閉的部份也可以調用jQuery來隱藏就是了。

    - 於 2009 年 08 月 24 日 15:37:03
  • 第20則 迴響由 網頁設計 Mac OS X Firefox 3.5.5 發表：

    對我來說實在很實用，改天做個來玩玩

    - 於 2009 年 11 月 24 日 13:33:56
  • 第21則 迴響由 小闇 Windows Vista Firefox 3.5.6 發表：

    想問問步驟三的前四個code是不是加到header.php，之前啊?
    謝謝 😳

    - 於 2009 年 12 月 31 日 16:08:00
  • 第22則 迴響由 阿諾 Windows XP Firefox 3.5.6 發表：

    To 小闇

    步驟三的Code是加在body標籤內的，依據網站載入的內容來修改。
    具體的放置可以參考我網頁的原始碼。^_^

    - 於 2009 年 12 月 31 日 16:54:58
  • 第23則 迴響由 Lay Windows other version Google Chrome 5.0.375.99 發表：

    這是我新建的WP
    http://brownsugar.idv.tw/video/

    我有照你說的去做,但是看不到特效ㄟ??

    可以麻煩幫我看看嗎??

    謝:)

    - 於 2010 年 07 月 11 日 01:03:45
  • 第24則 迴響由 Lay Windows other version Google Chrome 5.0.375.99 發表：

    還有我的網站在Chrome是好的,

    但在IE整個是大亂掉ㄟ??

    為什麼會這樣??

    - 於 2010 年 07 月 11 日 01:05:39
  • 第25則 迴響由 阿諾 Windows Vista Firefox 3.6.6 發表：

    To Lay

    感覺是沒調用成功！你可參考我的網頁原始碼來加入：

    [param name="FlashVars" value="textColor=0xFFFFFF&bgColor=0x303030&loadingBgColor=0x404040"]
    最後面補上這段試試看，[與]請自行換成< 及>。

    For IE要做額外設定，這就無法三言兩語可以解決了。

    - 於 2010 年 07 月 12 日 10:53:31
  • 第26則 迴響由 Lay Windows other version Google Chrome 5.0.375.99 發表：

    那個.....

    我的"平滑移出"效果好像一點也不平滑欸= =

    要怎麼設定呢??

    請教學一下謝謝=)

    - 於 2010 年 07 月 21 日 21:27:46
  • 第27則 迴響由 阿諾 Windows Vista Firefox 3.6.7 發表：

    To Lay

    我剛去你網站測試，平滑移出的效果很OK呀！
    如果你是「網站已經快取過的重新整理」或是「網站速度夠快」的話，它平滑移出的速度會相對變快，所以是正常的。^_^

    - 於 2010 年 07 月 22 日 09:18:16

發表您的迴響(連結不含Nofollow)

如果喜歡這篇文章，您可以於下方「留下您的迴響」 或於您網站使用此文章的「TrackBack」連結。當然更歡迎您訂閱「此篇文章(RSS)」或「敗家誌°(RSS)」，以便將日後新文章發佈給您的 RSS 瀏覽器。

敗家誌°支援 Gravatar 大頭貼，您可於「Gravatar官方網站」免費取得專屬大頭貼。emoticons

;-):|:x:twisted::smile::shock::sad::roll::razz::oops::o:mrgreen::lol::idea::grin::evil::cry::cool::arrow::???::?::!:

(完成後可按 Ctrl+Enter 發表迴響)

防機器人： 的答案是? (必填)