用jQuery模拟页面加载进度条的实现代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了用jQuery模拟页面加载进度条的实现代码,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3065字,纯文字阅读大概需要5分钟。
内容图文
![用jQuery模拟页面加载进度条的实现代码](/upload/InfoBanner/zyjiaocheng/369/b00ab79aa42c4a33aff477739061c87d.jpg)
我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用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
代码如下:
<div class="loading">
<div class="text"><input type="button" value="正在初始化"></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引用了,我们现在要写个方法,也就是可以让进度条动起来
代码如下:
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库做加载进度测试
代码如下:
<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>
demo下载地址:在线演示 点击下载
内容总结
以上是互联网集市为您收集整理的用jQuery模拟页面加载进度条的实现代码全部内容,希望文章能够帮你解决用jQuery模拟页面加载进度条的实现代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。