本次主要介紹一下網(wǎng)頁(yè)加載進(jìn)度的實(shí)現(xiàn)。如下圖，在頁(yè)面加載的時(shí)候，上方紅色的進(jìn)度條

網(wǎng)頁(yè)加載進(jìn)度的好處是能夠更好的反應(yīng)當(dāng)前網(wǎng)頁(yè)的加載進(jìn)度情況，loading進(jìn)度條可用動(dòng)畫的形式從開始0%到100%完成網(wǎng)頁(yè)加載這一過(guò)程。但是目前的瀏覽器并沒有提供頁(yè)面加載進(jìn)度方面的接口，也就是說(shuō)頁(yè)面還無(wú)法準(zhǔn)確返回頁(yè)面實(shí)際加載的進(jìn)度，本文中我們使用jQuery來(lái)實(shí)現(xiàn)頁(yè)面加載進(jìn)度條效果。

首先我們要知道的是，目前沒有任何瀏覽器可以直接獲取正在加載對(duì)象的大小。所以我們無(wú)法通過(guò)數(shù)據(jù)大小來(lái)實(shí)現(xiàn)0-100%的加載顯示過(guò)程。

因此我們需要通過(guò)html代碼逐行加載的特性，在整頁(yè)代碼的若干個(gè)跳躍行數(shù)中設(shè)置節(jié)點(diǎn)，進(jìn)行大概的模糊進(jìn)度反饋來(lái)實(shí)現(xiàn)進(jìn)度加載的效果。大致意思是：頁(yè)面每加載到指定區(qū)域，則返回(n)%的進(jìn)度結(jié)果，通過(guò)設(shè)置多個(gè)節(jié)點(diǎn)，來(lái)達(dá)到一步一步顯示加載進(jìn)度的目的。

假如有一個(gè)頁(yè)面，按區(qū)塊分為頁(yè)頭、左側(cè)內(nèi)容、右邊側(cè)欄、頁(yè)腳四部分，我們把這四部分作為四個(gè)節(jié)點(diǎn)，當(dāng)頁(yè)面加載每一個(gè)節(jié)點(diǎn)后，設(shè)置大概加載百分比，頁(yè)面結(jié)構(gòu)如下：

<div id="header"> 
頁(yè)頭部分 
</div> 
<div id="mainpage"> 
左側(cè)內(nèi)容 
</div> 
<div id="sider"> 
右邊側(cè)欄 
</div> 
<div id="footer"> 
頁(yè)腳部分 
</div> 

然后我們?cè)谙碌牡谝恍屑由线M(jìn)度條.loading。

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

我們要設(shè)置loading進(jìn)度條的樣式，設(shè)置背景色，高度，以及位置，優(yōu)先級(jí)等。

.loading{ 
  background:#FF6100; //設(shè)置進(jìn)度條的顏色 
  height:5px; //設(shè)置進(jìn)度條的高度 
  position:fixed; //設(shè)定進(jìn)度條跟隨屏幕滾動(dòng) 
  top:0; //將進(jìn)度條固定在頁(yè)面頂部 
  z-index:99999 //提高進(jìn)度條的優(yōu)先層級(jí)，避免被其他層遮擋 
} 

接下來(lái)，我們要在每個(gè)節(jié)點(diǎn)后面加上進(jìn)度動(dòng)畫，使用jQuery來(lái)實(shí)現(xiàn)。

<div id="header"> 
頁(yè)頭部分 
</div> 
<script type="text/javascript"> 
  $('.loading').animate({'width':'33%'},50); //第一個(gè)進(jìn)度節(jié)點(diǎn) 
</script> 
<div id="mainpage"> 
左側(cè)內(nèi)容 
</div> 
<script type="text/javascript"> 
  $('.loading').animate({'width':'55%'},50); //第二個(gè)進(jìn)度節(jié)點(diǎn) 
</script> 
<div id="sider"> 
右邊側(cè)欄 
</div> 
<script type="text/javascript"> 
  $('.loading').animate({'width':'80%'},50); //第三個(gè)進(jìn)度節(jié)點(diǎn) 
</script> 
<div id="footer"> 
頁(yè)腳部分 
</div> 
<script type="text/javascript"> 
  $('.loading').animate({'width':'100%'},50); //第四個(gè)進(jìn)度節(jié)點(diǎn) 
</script> 

可以看出，每加載一個(gè)節(jié)點(diǎn)后，jQuery調(diào)用animate()動(dòng)畫方法實(shí)現(xiàn)進(jìn)度條寬度的變化，每個(gè)節(jié)點(diǎn)變化以50毫秒時(shí)間讓進(jìn)度條看起來(lái)更流暢些，最終從0%變化到100%，完成了進(jìn)度條的進(jìn)度動(dòng)畫。

當(dāng)進(jìn)度條達(dá)到100%后，頁(yè)面加載完成，最后還有一步要做的就是隱藏進(jìn)度條。

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論