当前位置: 编程技术>jquery
jquery进度条代码 jquery模拟页面加载进度
来源: 互联网 发布时间：2014-10-09
本文导语: jquery模拟页面加载进度条 因为无法通过任何方法获取整个页面的大小和当前加载了多少，所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢？ 页面是从上往下执行的，可以大致估算出在页面的某个位置加载了多...
jquery模拟页面加载进度条
因为无法通过任何方法获取整个页面的大小和当前加载了多少，所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢？
页面是从上往下执行的，可以大致估算出在页面的某个位置加载了多少，而后用jquery模拟出一个进度条来显示。
效果图，如下：
首先，先画一个进度条的样子，也就是上图图中的样子。
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}
.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代码
系统初始化中
页面总进度 0%
注意要引用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);
});
}
};
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库做加载进度测试。
loading('正在加载jQuery UI',30);
loading('正在加载Chrome Frame',50);
loading('正在加载EXTJS',70);
loading('正在加载mootools',90);
loading('正在加载dojo',100);
loading('正在加载Chrome Frame',50);
loading('正在加载EXTJS',70);
loading('正在加载mootools',90);
loading('正在加载dojo',100);
您可能感兴趣的文章：
- 简单型jQuery进度条插件的实现代码
- jquery简单进度条一例
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。