jquery如何實現(xiàn)網(wǎng)頁加載進度條

這篇文章主要介紹“jquery如何實現(xiàn)網(wǎng)頁加載進度條”，在日常操作中，相信很多人在jquery如何實現(xiàn)網(wǎng)頁加載進度條問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”jquery如何實現(xiàn)網(wǎng)頁加載進度條”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

創(chuàng)新互聯(lián)建站長期為1000+客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為澠池企業(yè)提供專業(yè)的成都網(wǎng)站建設、成都網(wǎng)站設計，澠池網(wǎng)站改版等技術服務。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

如下圖，在頁面加載的時候，上方紅色的進度條

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

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

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

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

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

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

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

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

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

接下來，我們要在每個節(jié)點后面加上進度動畫，使用jQuery來實現(xiàn)。

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

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

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

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

到此，關于“jquery如何實現(xiàn)網(wǎng)頁加載進度條”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

本文標題：jquery如何實現(xiàn)網(wǎng)頁加載進度條
URL網(wǎng)址：http://bm7419.com/article38/jdccpp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、小程序開發(fā)、網(wǎng)站制作、動態(tài)網(wǎng)站、營銷型網(wǎng)站建設、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)