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


Posted in Javascript onDecember 19, 2011

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

我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用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下载地址:在线演示 点击下载
Javascript 相关文章推荐
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
Javascript中With语句用法实例
May 14 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
微信小程序实现图片上传
May 23 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
深入了解JS之作用域和闭包
Jun 16 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 #Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 #Javascript
JS获取整个页面文档的实现代码
Dec 15 #Javascript
jQuery版仿Path菜单效果
Dec 15 #Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 #Javascript
js 可拖动列表实现代码
Dec 13 #Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 #Javascript
You might like
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
详解php命令注入攻击
2019/04/06 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
JavaScript实现区块链
2018/03/14 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
django创建简单的页面响应实例教程
2019/09/06 Python
基于Python实现扑克牌面试题
2019/12/11 Python
Python 自由定制表格的实现示例
2020/03/20 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
公司投资建议书
2014/05/16 职场文书
党支部综合考察材料
2014/05/19 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
技术员个人工作总结
2015/03/03 职场文书
刑事法律意见书
2015/06/04 职场文书
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python