jQuery Page preloader

簡介

當使用一些網頁介面的程式庫時，如果沒有特別的處理，在網頁的介面元件眾多時，網頁常常會先出現預設的使用者介面元件，在程式庫下載完畢，對介面元件做完外觀的修改後，使用者才能看到完整的頁面；此時就是使用者口中常說的頁面閃動，造成不良的使用經驗。所以程式設計師常使用一種技巧，在下載頁面時先在螢幕上顯示一個動畫，或網頁下載中的訊息，請使用者稍安勿燥，耐心等候；而將網頁於背景處理完畢後，才顯示在螢幕上。雖然目前的網路速度比起從前要快上許多，然而一般的網頁也變得更為複雜，互動式的網頁還要多下載一些 javascript 的程式碼。雖然 jQuery 和 jQuery-ui 的程式庫都不大，下載的速度也快，但當網頁的元件很多，網路塞車時，使用上述的這種技巧，還是對提高使用者的滿意度很有幫助的。本篇所介紹的技巧是使用者在造訪主網頁時使用，動畫和下載中的訊息會遮蔽整個畫面；在使用網頁的過程中，只有局部畫面需要下載資料時，得用另一種方法，雖然兩者的基本原理是一樣的。

範例

在範例中，當下載網頁時（假裝這是個很複雜的主網頁），螢幕上會出現一個動畫及英文 Loading 的訊息；5 秒後動畫和訊息會消失，出現主網頁（在這個範例裡，主網頁中沒有任何元件）。

CSS

<style>
    html {
        width:100%;
        height:100%;
        background-color: white;
    }
    body {
        margin:0 auto;
        width:960px;
        height:100%;
        padding-top:20px;
        background-color: antiquewhite;
    }
    #pageOverlay {
        position:fixed;
        top:0; 
        left:0; 
        z-index:999; 
        height:100%; 
        width:100%; 
        padding-top:25%; 
        background:#eeeeee; 
        color:#666666;
        text-align:center;
    }
    #pageOverlay>img {
        padding:10px;
        border-radius:8px;
        background:#aaaaaa;
    }
</style>

CSS 中設定了 html 及 body 的背景底色。#pageOverlay{} 設定遮蔽的範圍為流覽器的視界 (viewport)，z-index 設為 999，應該會在出現在所有元件的前面了。 #pageOverlay>img{} 則設定了動畫的小區塊背景底色及圓邊角。

HTML

<body>
    
        
Loading...
    
</body>

HTML 中建立了一個含有 <img> 的 <div> 區塊。這是使用的 gif 動畫，可以按右鍵下載

Script

<script>
$(function(){
    // Put javascript code here
    setTimeout(function(){
        jQuery('#overlay').fadeOut().empty();
    }, 5000);
});
</script>

第 5 行最好放在程式的最後一行，以確保程式庫己處理完所有介面元件的外觀，整個主網頁都己就緒。範例中為了展示，所以將它放在 setTimeout() 函式中，真正實作時，是不會這麼做的。

熊伯的外接硬碟

2016年5月17日星期二