JavaScript實作網頁載入進度條碼超簡單_javascript技巧

網頁進度條能夠更好的回應當前網頁的載入進度情況，loading進度條可用動畫的形式從開始0%到100%完成網頁加載這一過程。但是目前的瀏覽器並沒有提供頁面加載進度方面的接口，也就是說頁面還無法準確返回頁面實際加載的進度，本文中我們使用jQuery來實現頁面加載進度條效果。

HTML

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

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

假如有一個頁面，依區塊分為頁頭、左側內容、右邊側欄、頁腳四部分，我們把這四部分作為四個節點，當頁面加載每一個節點後，設置大概加載百分比，頁面結構如下：

<div id="header"> 
页头部分 
</div> 
<div id="mainpage"> 
左侧内容 
</div> 
<div id="sider"> 
右边侧栏 
</div> 
<div id="footer"> 
页脚部分 
</div> 

然後我們在

下的第一行加上進度條.loading。

<div class="loading"></div> 

CSS

我們要設定loading進度條的樣式，設定背景色，高度，以及位置，優先權等。

.loading{ 
 background:#FF6100; //设置进度条的颜色 
 height:5px; //设置进度条的高度 
 position:fixed; //设定进度条跟随屏幕滚动 
 top:0; //将进度条固定在页面顶部 
 z-index:99999 //提高进度条的优先层级，避免被其他层遮挡 
} 

jQuery

接下來，我們要在每個節點後面加上進度動畫，使用jQuery來實作。

<div id="header"> 
页头部分</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'33%'},50); 
 //第一个进度节点 
</script> 
<div id="mainpage"> 
左侧内容 
</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'55%'},50); 
//第二个进度节点 
</script> 
<div id="sider"> 
右边侧栏 
</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'80%'},50); 
//第三个进度节点 
</script> 
<div id="footer"> 
页脚部分 
</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'100%'},50); 
 //第四个进度节点 
</script> 

可以看出，沒載入一個節點後，jQuery呼叫animate()動畫方法實現進度條寬度的變化，每個節點變化以50毫秒時間讓進度條看起來更流暢些，最終從0%變化到100%，完成了進度條的進度動畫。

當進度條達到100%後，頁面載入完成，最後還有一步要做的就是隱藏進度條。

$(document).ready(function(){ 
 $('.loading').fadeOut();  
});