用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 相关文章推荐
Js 随机数产生6位数字
May 13 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
javascript性能优化之分时函数的介绍
Mar 28 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 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
PHP编写简单的App接口
2016/08/28 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
原生JS实现九宫格抽奖
2020/09/13 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
深入浅析Python代码规范性检测
2020/07/31 Python
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
技校毕业生自荐信范文
2014/03/07 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
2015年司法局工作总结
2015/05/22 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL