DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript實現網頁加載進度條代碼超簡單
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> 

然後我們在<body>下的第一行加上進度條.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();  
});
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved