用jQuery模拟页面加载进度条的实现代码_jquery

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少，所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢？
　　我们知道，页面是从上往下执行的，也就是说我们可以大致估算出在页面的某个位置加载了多少，而后用jq模拟出一个进度条来显示。
　　首先我们先画一个进度条的样子，也就是上图图中的样子，这个不用过多说明，自己看代码
　　CSS

复制代码 代码如下:

*{margin:0;padding:0;font-size:12px}
.loading{position:relative;top:0;left:0}
.text input{float:left;color:#fff;height:32px;line-height:34px;padding:0 15px;background:#A70000;border:0}
.jindu{float:left;margin-left:14px;color:#fff;width:150px;height:32px;line-height:32px;background:#000;position:relative}
.jindu b{color:#A70000;font-size:0px;border-width:10px;border-color:transparent transparent transparent #A70000;border-style:dotted dotted dotted solid;position:absolute;left:-16px;top:5px}
.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

复制代码 代码如下:

页面总进度 0%

这时候注意了，我们要引用jquery库，引用的位置不是在head区域，而是紧接着html代码下面写。为什么要这样，因为样式我们放head里的原因是保证页面加载第一步就把样式加载好，这样页面不会乱。而JS则不需要，再加上页面上大的文件主要也就是js，所以放在body里加载js是为了进度条考虑。
　　进度条画好了，jquery引用了，我们现在要写个方法，也就是可以让进度条动起来

复制代码 代码如下:

var loading = function(a,b){
var c = b*1.5;
if(b==100){
$('.loading .jindu2').animate({width:c+'px'},500,function(){
$('.loading input').val(a);
$('.loading font').text(b);
$('.loading').animate({top:'-32px'},1000,function(){
alert('页面加载完毕');
});
});
}else{
$('.loading .jindu2').animate({width:c+'px'},500,function(){
$('.loading input').val(a);
$('.loading font').text(b);
});
}
};

这里我写了个loading(a,b)，两个参数分别是显示加载内容提示信息和加载进度百分比，然后，我用了其他几个js库做加载进度测试

复制代码 代码如下:

demo下载地址：在线演示 点击下载