基于jQuery实现模拟页面加载进度条


Posted in Javascript onApril 01, 2013

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

我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示。

首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码
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} 
 

HTML
<div class="loading"> 
<div class="tip1">系统初始化中</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){ 
$('.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库做加载进度测试
<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 相关文章推荐
用JavaScript获取网页中的js、css、Flash等文件
Dec 20 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 #Javascript
JavaScript中的onerror事件概述及使用
Apr 01 #Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 #Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 #Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 #Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 #Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 #Javascript
You might like
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
浅析php header 跳转
2013/06/17 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
JavaScript 程序编码规范
2010/11/23 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
js断点调试经验分享
2017/12/08 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
Vue中keep-alive组件作用详解
2020/02/04 Javascript
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
详解python中的线程与线程池
2019/05/10 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
python时间time模块处理大全
2020/10/25 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
大学毕业生通用自我评价
2014/01/05 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
高中综合实践活动总结
2014/07/07 职场文书
考试保密承诺书
2014/08/30 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
2015国庆节宣传语
2015/07/14 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP