JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)加載進(jìn)度條代碼超簡(jiǎn)單
網(wǎng)頁(yè)進(jìn)度條能夠更好的反應(yīng)當(dāng)前網(wǎng)頁(yè)的加載進(jìn)度情況，loading進(jìn)度條可用動(dòng)畫(huà)的形式從開(kāi)始0%到100%完成網(wǎng)頁(yè)加載這一過(guò)程。但是目前的瀏覽器并沒(méi)有提供頁(yè)面加載進(jìn)度方面的接口，也就是說(shuō)頁(yè)面還無(wú)法準(zhǔn)確返回頁(yè)面實(shí)際加載的進(jìn)度，本文中我們使用jQuery來(lái)實(shí)現(xiàn)頁(yè)面加載進(jìn)度條效果。
HTML
首先我們要知道的是，目前沒(méi)有任何瀏覽器可以直接獲取正在加載對(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è)?lt;body>下的第一行加上進(jìn)度條.loading。
<div class="loading"></div>
CSS
我們要設(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í)，避免被其他層遮擋
}
jQuery
接下來(lái)，我們要在每個(gè)節(jié)點(diǎn)后面加上進(jìn)度動(dòng)畫(huà)，使用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>
可以看出，沒(méi)加載一個(gè)節(jié)點(diǎn)后，jQuery調(diào)用animate()動(dòng)畫(huà)方法實(shí)現(xiàn)進(jìn)度條寬度的變化，每個(gè)節(jié)點(diǎn)變化以50毫秒時(shí)間讓進(jìn)度條看起來(lái)更流暢些，最終從0%變化到100%，完成了進(jìn)度條的進(jìn)度動(dòng)畫(huà)。
當(dāng)進(jìn)度條達(dá)到100%后，頁(yè)面加載完成，最后還有一步要做的就是隱藏進(jìn)度條。
$(document).ready(function(){
$('.loading').fadeOut();
});
- 簡(jiǎn)單實(shí)現(xiàn)js進(jìn)度條加載效果
- pace.js頁(yè)面加載進(jìn)度條插件
- javascript 實(shí)現(xiàn)頁(yè)面加載進(jìn)度條代碼
- js ajax加載時(shí)的進(jìn)度條代碼
- js+HTML5 canvas 實(shí)現(xiàn)簡(jiǎn)單的加載條(進(jìn)度條)功能示例
- jquery插件NProgress.js制作網(wǎng)頁(yè)加載進(jìn)度條
- 淺析JS異步加載進(jìn)度條
- JS實(shí)現(xiàn)進(jìn)度條動(dòng)態(tài)加載特效
- 環(huán)形加載進(jìn)度條封裝（Vue插件版和原生js版）
- JavaScript canvas繪制圓形加載進(jìn)度條
相關(guān)文章
js實(shí)現(xiàn)文字跟隨鼠標(biāo)移動(dòng)而移動(dòng)的方法
這篇文章主要介紹了js實(shí)現(xiàn)文字跟隨鼠標(biāo)移動(dòng)而移動(dòng)的方法,實(shí)例分析了javascript處理鼠標(biāo)事件及文字特效的技巧,需要的朋友可以參考下2015-02-02
javascript中parentNode,childNodes,children的應(yīng)用詳解
本篇文章是對(duì)javascript中parentNode,childNodes,children的應(yīng)用進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要為大家詳細(xì)介紹了js模擬支付寶密碼輸入框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
Bootstrap選項(xiàng)卡與Masonry插件的完美結(jié)合
這篇文章主要介紹了Bootstrap選項(xiàng)卡與Masonry插件的完美結(jié)合的相關(guān)資料,需要的朋友可以參考下2016-07-07
javascript 使用for循環(huán)時(shí)該注意的問(wèn)題-附問(wèn)題總結(jié)
所謂for循環(huán)就是重復(fù)的執(zhí)行一段代碼，for循環(huán)也是希望在創(chuàng)建循環(huán)時(shí)常會(huì)用到的工具，這篇內(nèi)容主要給大家介紹javascript 使用for循環(huán)時(shí)該注意的問(wèn)題-附問(wèn)題總結(jié)，需要的朋友可以參考下2015-08-08
js+html5實(shí)現(xiàn)可在手機(jī)上玩的拼圖游戲
這篇文章主要介紹了js+html5實(shí)現(xiàn)可在手機(jī)上玩的拼圖游戲,涉及javascript結(jié)合html5進(jìn)行圖形操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
JavaScript算法題之如何將一個(gè)數(shù)組旋轉(zhuǎn)k步
這篇文章主要給大家介紹了關(guān)于JavaScript算法題之如何將一個(gè)數(shù)組旋轉(zhuǎn)k步的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
javascript實(shí)現(xiàn)信息增刪改查的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)信息增刪改查的方法,實(shí)例分析了javascript操作頁(yè)面元素實(shí)現(xiàn)針對(duì)頁(yè)面信息的增刪改查功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
JavaScript實(shí)現(xiàn)圖片局部放大鏡交互功能
在網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)中,圖片局部放大鏡交互功能是一個(gè)常見(jiàn)的需求,它可以增強(qiáng)用戶體驗(yàn),讓用戶更仔細(xì)地查看圖片的細(xì)節(jié),本文將介紹如何使用JavaScript來(lái)實(shí)現(xiàn)這一功能,以及提供代碼示例和詳細(xì)解釋,需要的朋友可以參考下2023-10-10
所謂事件委托，就是將原本應(yīng)該在當(dāng)前元素綁定的事件，放到它的祖先元素上，讓祖先元素來(lái)委托處理。今天我們來(lái)認(rèn)識(shí)一下JS中的事件委托2022-07-07