首頁  >  文章  >  web前端  >  jquery網頁載入進度條實作方法

jquery網頁載入進度條實作方法

小云云
小云云原創
2018-01-10 10:58:172534瀏覽

本文主要介紹了jquery網頁載入進度條的實現 ,在頁面載入的時候,上方紅色的進度條,有興趣的可以了解一下,希望能幫助到大家。

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

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

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

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


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

然後我們在下的第一行加上進度條.loading。


<p class="loading"></p>

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


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

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


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

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

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


$(document).ready(function(){ 
  $(&#39;.loading&#39;).fadeOut();   
});

相關推薦:

H5中​​視訊與音訊標籤和進度列如何使用

css3實作圓形進度條的方法

網頁進度列一種簡單的實作方法

以上是jquery網頁載入進度條實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn