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

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

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

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

<div id="divLoading"
    style="border:3px blue solid;background-color:#ba2a4a;color:white;position:absolute;top:-50px;left:350px;width:250px;height:50px;z-order=0">
  <img src="http://b.blog.xuite.net/b/3/a/c/11893557/blog_10351/txt/11293067/7.gif"
       style="vertical-align:middle;padding:6px"/>
  網頁載入中，請稍候...
</div>

基本結構就是用一個區域(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"，則「載入中」的框框就消失了。

<script>
  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);
  }
</script>