首頁 > 開發者 > JavaScript
JavaScript實現網頁載入進度條代碼超簡單，javascript進度條
網頁進度條能夠更好的反應當前網頁的載入進度情況，loading進度條可用動畫的形式從開始0%到100%完成網頁載入這一過程。但是目前的瀏覽器並沒有提供頁面載入進度方面的介面，也就是說頁面還無法準確返回頁面實際載入的進度，本文中我們使用jQuery來實現頁面載入進度條效果。
HTML
首先我們要知道的是，目前沒有任何瀏覽器可以直接擷取正在載入對象的大小。所以我們無法通過資料大小來實現0-100%的載入顯示過程。
因此我們需要通過html代碼逐行載入的特性，在整頁代碼的若干個跳躍行數中設定節點，進行大概的模糊進度反饋來實現進度載入的效果。大致意思是：頁面每載入到指定地區，則返回(n)%的進度結果，通過設定多個節點，來達到一步一步顯示載入進度的目的。
假如有一個頁面，按區塊分為頁頭、左側內容、右邊側欄、頁尾四部分，我們把這四部分作為四個節點，當頁面載入每一個節點後，設定大概載入百分比，頁面結構如下：
<div id="header"> 頁頭部分 </div> <div id="mainpage"> 左側內容 </div> <div id="sider"> 右邊側欄 </div> <div id="footer"> 頁尾部分 </div>
然後我們在<body>下的第一行加上進度條.loading。
<div class="loading"></div>
CSS
我們要設定loading進度條的樣式，設定背景色，高度，以及位置，優先順序等。
.loading{ background:#FF6100; //設定進度條的顏色 height:5px; //設定進度條的高度 position:fixed; //設定進度條跟隨螢幕滾動 top:0; //將進度條固定在頁面頂部 z-index:99999 //提高進度條的優先層級，避免被其他層遮擋 }
jQuery
接下來，我們要在每個節點後面加上進度動畫，使用jQuery來實現。
<div id="header"> 頁頭部分</div> <script type="text/javascript"> $('.loading').animate({'width':'33%'},50); //第一個進度節點 </script> <div id="mainpage"> 左側內容 </div> <script type="text/javascript"> $('.loading').animate({'width':'55%'},50); //第二個進度節點 </script> <div id="sider"> 右邊側欄 </div> <script type="text/javascript"> $('.loading').animate({'width':'80%'},50); //第三個進度節點 </script> <div id="footer"> 頁尾部分 </div> <script type="text/javascript"> $('.loading').animate({'width':'100%'},50); //第四個進度節點 </script>
可以看出，沒載入一個節點後，jQuery調用animate()動畫方法實現進度條寬度的變化，每個節點變化以50毫秒時間讓進度條看起來更流暢些，最終從0%變化到100%，完成了進度條的進度動畫。
當進度條達到100%後，頁面載入完成，最後還有一步要做的就是隱藏進度條。
$(document).ready(function(){ $('.loading').fadeOut(); });
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
