因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢?
我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用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}
代码如下:
<p class="loading">
<p class="text"><input type="button" value="正在初始化"></p>
<p class="jindu">
<b></b>
<p class="jindu2"></p>
<p class="text">页面总进度 <font>0</font>%</p>
</p>
</p>
代码如下:
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);
});
}
};
代码如下:
<script type="text/javascript">loading('正在加载jquery ui',30);</script>
<script type="text/javascript" src="https://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="https://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="https://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="https://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="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
如对本文有疑问, 点击进行留言回复!!
2016年信息安全工程师综合知识第11-15题解析【建群网培信息安全工程师】
网友评论