基於jQuery實作模擬頁面載入進度條_jquery

因為我們無法透過任何方法取得整個頁面的大小和目前載入了多少，所以想製作一個載入進度條的唯一方法就是模擬。那怎麼模擬呢？


我們知道，頁面是從上往下執行的，也就是說我們可以大致估算出在頁面的某個位置加載了多少，而後用jq模擬出一個進度條來顯示。

首先我們先畫一個進度條的樣子，也就是上圖圖中的樣子，這個不用過多說明，自己看代碼
CSS

複製程式碼 程式碼如下:

.loading{position:relative;top:0;left:0}
.tip1{float:left ;background:#A70000;color:#fff;height:32px;line-height:32px;padding:0 15px;border:0;position:relative}
.jindu{float:left;margin-left:20px; color:#fff;width:150px;height:32px;line-height:32px;background:#000;position:relative}
.jindu b{color:#A70000;width:0;height:0;font- size:0px;border-width:10px;border-color:#fff #fff #fff #A70000;border-style:solid;position:absolute;left:-20px;top:5px;overflow:hidden}
. jindu .jindu2{width:0px;height:32px;line-height:32px;background:#A70000;position:absolute}
.jindu .text{width:150px;height:32px;line-height:32px; -align:center;position:absolute}
　

HTML

複製程式碼

複製程式碼

複製程式碼


複製程式碼

系統初始化中

頁總進度0%

這時候注意了，我們要引用jquery庫，引用的位置不是在head區域，而是緊接著html程式碼下面寫。為什麼要這樣，因為樣式我們放head裡的原因是確保頁面載入第一步就把樣式加載好，這樣頁面不會亂。而JS則不需要，再加上頁面上大的檔案主要也就是js，所以放在body裡載入js是為了進度條考慮。 進度條畫好了，jquery引用了，我們現在要寫個方法，也就是可以讓進度條動起來

複製程式碼


程式碼如下:


var loading = function(a,b){
var c = b*1.5;
if(b==100){
$('.bgloader .jindu2').animate({width:c 'px'},500,function(){
$('.bgloader .tip1').text(a);
$( '.bgloader font').text(b);
$('.bgloader .loading').animate({top:'-32px'},1000,function(){
$('.bgloader ').fadeOut();
});
});
}else{

$('.bgloader .jindu2').animate({width:c 'px'},500 ,function(){
$('.bgloader .tip1').text(a);
$('.bgloader font').text(b);

}); } }; 這裡我寫了個loading(a,b)，兩個參數分別是顯示載入內容提示資訊和載入進度百分比，然後，我用了其他幾個js函式庫做載入進度測試

複製程式碼 程式碼如下:

> ;
;
> ;
;
> ;

> ;

> ;

示範下載位址： 點選下載