WordPress網頁載入進度條的JS程式開發思路與實際應用

頁面載入進度條實現原理：
將要載入的 js 動態的新增到 head 中，並根據每個是否載入完成，統計當前一共載入完成的個數。當每一項都載入完成，載入成功。設定載入失敗時間。當超過這個時間提示載入失敗。

一、實現邏輯與概念

先我們要知道的是，目前沒有任何瀏覽器可以直接獲取正在載入物件的大小。所以我們無法透過資料大小來實現 0-100% 的載入顯示過程。

因此我們需要透過 html 程式碼逐行載入的特性，在整頁程式碼的若干個跳躍行數中設定節點，進行大概的模糊進度反饋來實現進度載入的效果。大致意思是：頁面每載入到指定區域，則返回 (n)% 的進度結果，透過設定多個節點，來達到一步一步顯示載入進度的目的。

具體是如何設定呢？先我們將網頁分成若干區域，就以 frontopen 來說，網站的結構分為 head 區域、 mian 區域（文章主體部分）、 sidebar 側邊欄、 foot 腳部四個部分。考慮做一個範圍粗獷一點進度反饋效果。如下圖：

將進度反饋設定為四個部分：head 部分返回 30% 進度，main 部分返回 60% 進度，sidebar 部分返回 70% 進度，後 foot 載入完成後返回 100% 。

二、實現方法

1. 先我們需要在 html 頁面中，給進度條設定設定一個容器。例如本博的 body 下方會有一個 “

” 的 div 容器，這就是後面我們需要操作並顯示的進度條了，當然大家有興趣的話可以設定更多有個性的進度條。

2. 為 loading 容器設定樣式，以本博的進度條為例，樣式如下：

.loading{

background:#FF6100; //設定進度條的顏色

height:5px; //設定進度條的高度

position:fixed; //設定進度條跟隨螢幕滾動

top:0; //將進度條固定在頁面頂部

z-index:99999 //提高進度條的優先層級，避免被其他層遮擋

}

3. 透過 jquery 的 animate 動畫效果，來實現進度條的動畫載入過程。簡單的進行構思，決定使用由左向右的載入效果。終 animate 的執行程式碼為 “$(‘.loading’).animate({‘width’:’100%’},200);”

4. 思考需要設定幾個載入進度節點。上面透過構思，我們已經決定使用 30% 、 60% 、 70% 、 100% 四個進度節點，分別插入到對應的頁面位置。並結合上面的 animate 動畫程式碼，終確定四個進度節點的程式碼為：$(‘.loading’).animate({‘width’:’30%’},50) 、 $(‘.loading’).animate({‘width’:’60%’},50) 、 $(‘.loading’).animate({‘width’:’70%’},50) 、 $(‘.loading’).animate({‘width’:’100%’},50) 。可能大家會問，為什麼速度變成了 50 毫秒？因為之前一步載入為 100% 的動畫被分成份，所以為了保證動畫的連貫性，將其每份切分成為 50 毫秒。

三、插入到頁面中的實際應用示例

以本博模板頁檔案 index.php 為例，給大家展示四個節點如何插入到對應的位置。當然這個示例只是為了更好的解釋上面的程式策劃結論，並不限於這種設定方法。大家在需要的地方可以發揮更多的想象，舉一反三創造出更絢麗的樣式。

index.php 檔案程式碼