jquery进度条代码 jquery模拟页面加载进度

发布时间:2020-10-15编辑:脚本学堂
分享一例jquery进度条的实现方法,jquery模拟页面加载进度显示进度条,可以大致估算出在页面的某个位置加载了多少,而后用jquery模拟出一个进度条来显示。

jquery模拟页面加载进度条

因为无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢?

页面是从上往下执行的,可以大致估算出在页面的某个位置加载了多少,而后用jquery模拟出一个进度条来显示。

效果图,如下:
<a href=http://www.jb200.com/jquery/jindutiao/ target=_blank class=infotextkey>jquery进度条</a>

首先,先画一个进度条的样子,也就是上图图中的样子。
1,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}
 

2,html代码
 

<div class="loading">
<div class="tip1">系统初始化中</div>
<div class="jindu">
<b></b>
<div class="jindu2"></div>
<div class="text">页面总进度 <font>0</font>%</div>
</div>
</div>

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

代码:
 

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库做加载进度测试。
 

<script type="text/javascript">loading('正在加载jQuery UI',30);</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">loading('正在加载Chrome Frame',50);</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>
<script type="text/javascript">loading('正在加载EXTJS',70);</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>
<script type="text/javascript">loading('正在加载mootools',90);</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
<script type="text/javascript">loading('正在加载dojo',100);</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>