因?yàn)槲覀儫o法通過任何方法獲取整個(gè)頁面的大小和當(dāng)前加載了多少，所以想制作一個(gè)加載進(jìn)度條的唯一辦法就是模擬。那要怎么模擬呢？

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

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

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;text-align:center;position:absolute}

HTML

代碼如下:

系統(tǒng)初始化中

頁面總進(jìn)度 0%

這時(shí)候注意了，我們要引用jquery庫，引用的位置不是在head區(qū)域，而是緊接著html代碼下面寫。為什么要這樣，因?yàn)闃邮轿覀兎舎ead里的原因是保證頁面加載第一步就把樣式加載好，這樣頁面不會亂。而JS則不需要，再加上頁面上大的文件主要也就是js，所以放在body里加載js是為了進(jìn)度條考慮。

進(jìn)度條畫好了，jquery引用了，我們現(xiàn)在要寫個(gè)方法，也就是可以讓進(jìn)度條動起來

代碼如下:

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);

});

}

};

這里我寫了個(gè)loading(a,b)，兩個(gè)參數(shù)分別是顯示加載內(nèi)容提示信息和加載進(jìn)度百分比，然后，我用了其他幾個(gè)js庫做加載進(jìn)度測試

代碼如下:

總結(jié)

以上是生活随笔為你收集整理的php+页面加载进度,基于jQuery实现模拟页面加载进度条_jquery的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。