網站製作學習誌

記錄學習製作網站的一切

模擬 Google Mail 載入

有客戶向我們反應，他每次操作我們後台管理介面時，總是會有 JavaScript Error 發生。可是我在公司測試時，卻找不到錯誤。後來我同事告訴我，因為客戶那邊的網路連線速度太慢，而頁面還沒完整出現前，他們就直接去操作下拉式選單作換頁動作。這樣一來，如果該動作事件會呼叫某些還沒載入的 JavaScript 時，就會發生 JavaScript Error 。

當然解決的方式有很多，只是為了相容於其他程式，我就想到了 Google Mail 的載入畫面。 Google Mail 一開始的時候會在右上角出現一個紅底白字的「載入中」，不過它是用 AJAX 技術完成的，我並不想做的這麼複雜。因此，我想到了一個方式：不出現就按不到。

實作

原理很簡單，一開始把整個網頁用一個 DIV (#container) 包起來，這個 DIV 預設是不顯示的。然後我用一個 JS 顯示載入中的紅色小區塊，當頁面全部載入完成時，再把 DIV 顯示出來，而載入中的區塊則隱藏起來。

為了能夠重用這些 JavaScript ，我把它寫成一個類別：

程式如下：

gmail_loading.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

var GmailLoading = function() {}
GmailLoading.wording = 'Loading...';
GmailLoading.show = function() {
    var sLoadingDiv = '<div id="document-loading" style="'
        + 'position: absolute; '
        + 'color: #FFF; '
        + 'background-color: #F33; '
        + 'width: 100px; '
        + 'height: 20px; '
        + 'top:0; '
        + 'right: 0; '
        + 'font-family: Arial; '
        + 'font-weight: bold; '
        + 'text-align: center; '
        + '">'
        + this.wording
        + '</div>';
    document.write(sLoadingDiv);
}
GmailLoading.hide = function() {
    oLoadingDiv = document.getElementById('document-loading');
    oLoadingDiv.style.display = 'none';
    document.getElementById('container').style.display = 'block';
}

使用範例

HTML 頁面要改成這樣：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>測試載入文件</title>
<script type="text/javascript" src="gmail_loading.js"></script>
<script type="text/javascript">
GmailLoading.wording = '載入中...';
GmailLoading.show();
</script>
</head>
<body>
<div id="container" style="display: none;">
一大串的 HTML 內容
</div>
<script type="text/javascript">
GmailLoading.hide();
</script>
</body>
</html>

也可以這樣寫：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>測試載入文件</title>
<script type="text/javascript" src="gmail_loading.js"></script>
<script type="text/javascript">
GmailLoading.wording = '載入中...';
GmailLoading.show();
window.onload = GmailLoading.hide;
</script>
</head>
<body>
<div id="container" style="display: none;">
一大串的 HTML 內容
</div>
</body>
</html>

你也可以把這三行：

1
2
3

GmailLoading.wording = '載入中...';
GmailLoading.show();
window.onload = GmailLoading.hide;

一起放到 gmail_loading.js 的最底下。

頁面內容一定要用 DIV#container 包起來，不然會發生問題。

當然這沒有解決到伺服端等待的問題，當按下送出鈕時，如果伺服端程式的處理時間非常久的話，就要換別的方式來實作，不過這樣的方式已經能解決我的問題了。

補充

一、如果你要在 UTF-8 格式的頁面上使用時，也最好把 gmail_loading.js 存成 UTF-8 格式，這樣一來裡面有中文字的話，就不會出現亂碼了。

二、現在可以用 jQuery 的 ready 事件來改寫了，這樣就不必等到所有圖片載完才執行。

註：本文最初發表時， jQuery 還沒出現。

Comments