jquery網(wǎng)頁加載進度條的實現(xiàn)
本次主要介紹一下網(wǎng)頁加載進度的實現(xiàn)。如下圖，在頁面加載的時候，上方紅色的進度條
網(wǎng)頁加載進度的好處是能夠更好的反應(yīng)當(dāng)前網(wǎng)頁的加載進度情況，loading進度條可用動畫的形式從開始0%到100%完成網(wǎng)頁加載這一過程。但是目前的瀏覽器并沒有提供頁面加載進度方面的接口，也就是說頁面還無法準(zhǔn)確返回頁面實際加載的進度，本文中我們使用jQuery來實現(xiàn)頁面加載進度條效果。
首先我們要知道的是，目前沒有任何瀏覽器可以直接獲取正在加載對象的大小。所以我們無法通過數(shù)據(jù)大小來實現(xiàn)0-100%的加載顯示過程。
因此我們需要通過html代碼逐行加載的特性，在整頁代碼的若干個跳躍行數(shù)中設(shè)置節(jié)點，進行大概的模糊進度反饋來實現(xiàn)進度加載的效果。大致意思是：頁面每加載到指定區(qū)域，則返回(n)%的進度結(jié)果，通過設(shè)置多個節(jié)點，來達到一步一步顯示加載進度的目的。
假如有一個頁面，按區(qū)塊分為頁頭、左側(cè)內(nèi)容、右邊側(cè)欄、頁腳四部分，我們把這四部分作為四個節(jié)點，當(dāng)頁面加載每一個節(jié)點后，設(shè)置大概加載百分比，頁面結(jié)構(gòu)如下：
<div id="header"> 頁頭部分 </div> <div id="mainpage"> 左側(cè)內(nèi)容 </div> <div id="sider"> 右邊側(cè)欄 </div> <div id="footer"> 頁腳部分 </div>
然后我們在下的第一行加上進度條.loading。
<div class="loading"></div>
我們要設(shè)置loading進度條的樣式，設(shè)置背景色，高度，以及位置，優(yōu)先級等。
.loading{
background:#FF6100; //設(shè)置進度條的顏色
height:5px; //設(shè)置進度條的高度
position:fixed; //設(shè)定進度條跟隨屏幕滾動
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">
左側(cè)內(nèi)容
</div>
<script type="text/javascript">
$('.loading').animate({'width':'55%'},50); //第二個進度節(jié)點
</script>
<div id="sider">
右邊側(cè)欄
</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調(diào)用animate()動畫方法實現(xiàn)進度條寬度的變化，每個節(jié)點變化以50毫秒時間讓進度條看起來更流暢些，最終從0%變化到100%，完成了進度條的進度動畫。
當(dāng)進度條達到100%后，頁面加載完成，最后還有一步要做的就是隱藏進度條。
$(document).ready(function(){
$('.loading').fadeOut();
});
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)的簡單歌詞滾動功能,結(jié)合實例形式分析了基于jQuery插件scroll.js實現(xiàn)滾動功能相關(guān)操作技巧,涉及jQuery結(jié)合時間函數(shù)動態(tài)操作頁面元素相關(guān)實現(xiàn)方法,需要的朋友可以參考下2019-01-01
這篇文章主要為大家詳細介紹了jquery插件編寫countdown計時器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
jQuery Migrate 1.1.0 Released 注意事項
jQuery開發(fā)團隊前一段時間發(fā)布了jQuery 1.9版本，刪除了1.8版本中的部分API，為了使前端開發(fā)者能夠順利遷移至該版本，該團隊還發(fā)布了遷移插件jQuery Migrate2014-06-06
因為我們無法通過任何方法獲取整個頁面的大小和當(dāng)前加載了多少，所以想制作一個加載進度條的唯一辦法就是模擬。那要怎么模擬呢2011-12-12
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)HTML元素隱藏和顯示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
昨天用jQuery，做ajax提交，怎么都不成功，后來經(jīng)過反復(fù)試驗，總結(jié)了一個經(jīng)驗2009-04-04
這篇文章介紹了Jquery實現(xiàn)Ajax跨域訪問的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
利用jQuery實現(xiàn)滑動開關(guān)按鈕效果（附demo源碼下載）
這篇文章主要介紹了利用jQuery實現(xiàn)滑動開關(guān)按鈕效果，文中給出了詳細的介紹，并在文末給出了完整的demo源碼下載，有需要的朋友可以參考簡介，下面來一起看看吧。2017-02-02
AJAX的跨域與JSONP(另送一個為文章自動添加短址的功能)2010-01-01
原生Aajax 和jQuery Ajax 寫法個人總結(jié)
AJAX:即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。本文重點給大家介紹原生Aajax 和jQuery Ajax 個人總結(jié)，一起看看吧2017-03-03