您好,登錄后才能下訂單哦!
小編給大家分享一下jquery怎么實現(xiàn)網(wǎng)頁加載進(jìn)度條,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
如下圖,在頁面加載的時候,上方紅色的進(jìn)度條
網(wǎng)頁加載進(jìn)度的好處是能夠更好的反應(yīng)當(dāng)前網(wǎng)頁的加載進(jìn)度情況,loading進(jìn)度條可用動畫的形式從開始0%到100%完成網(wǎng)頁加載這一過程。但是目前的瀏覽器并沒有提供頁面加載進(jìn)度方面的接口,也就是說頁面還無法準(zhǔn)確返回頁面實際加載的進(jìn)度,本文中我們使用jQuery來實現(xiàn)頁面加載進(jìn)度條效果。
首先我們要知道的是,目前沒有任何瀏覽器可以直接獲取正在加載對象的大小。所以我們無法通過數(shù)據(jù)大小來實現(xiàn)0-100%的加載顯示過程。
因此我們需要通過html代碼逐行加載的特性,在整頁代碼的若干個跳躍行數(shù)中設(shè)置節(jié)點,進(jìn)行大概的模糊進(jìn)度反饋來實現(xiàn)進(jìn)度加載的效果。大致意思是:頁面每加載到指定區(qū)域,則返回(n)%的進(jìn)度結(jié)果,通過設(shè)置多個節(jié)點,來達(dá)到一步一步顯示加載進(jìn)度的目的。
假如有一個頁面,按區(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>
然后我們在下的第一行加上進(jìn)度條.loading。
<div class="loading"></div>
我們要設(shè)置loading進(jìn)度條的樣式,設(shè)置背景色,高度,以及位置,優(yōu)先級等。
.loading{ background:#FF6100; //設(shè)置進(jìn)度條的顏色 height:5px; //設(shè)置進(jìn)度條的高度 position:fixed; //設(shè)定進(jìn)度條跟隨屏幕滾動 top:0; //將進(jìn)度條固定在頁面頂部 z-index:99999 //提高進(jìn)度條的優(yōu)先層級,避免被其他層遮擋 }
接下來,我們要在每個節(jié)點后面加上進(jìn)度動畫,使用jQuery來實現(xiàn)。
<div id="header"> 頁頭部分 </div> <script type="text/javascript"> $('.loading').animate({'width':'33%'},50); //第一個進(jìn)度節(jié)點 </script> <div id="mainpage"> 左側(cè)內(nèi)容 </div> <script type="text/javascript"> $('.loading').animate({'width':'55%'},50); //第二個進(jìn)度節(jié)點 </script> <div id="sider"> 右邊側(cè)欄 </div> <script type="text/javascript"> $('.loading').animate({'width':'80%'},50); //第三個進(jìn)度節(jié)點 </script> <div id="footer"> 頁腳部分 </div> <script type="text/javascript"> $('.loading').animate({'width':'100%'},50); //第四個進(jìn)度節(jié)點 </script>
可以看出,每加載一個節(jié)點后,jQuery調(diào)用animate()動畫方法實現(xiàn)進(jìn)度條寬度的變化,每個節(jié)點變化以50毫秒時間讓進(jìn)度條看起來更流暢些,最終從0%變化到100%,完成了進(jìn)度條的進(jìn)度動畫。
當(dāng)進(jìn)度條達(dá)到100%后,頁面加載完成,最后還有一步要做的就是隱藏進(jìn)度條。
$(document).ready(function(){ $('.loading').fadeOut(); });
看完了這篇文章,相信你對“jquery怎么實現(xiàn)網(wǎng)頁加載進(jìn)度條”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。