用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函数
Oct 16 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
分析javascript原型及原型链
Mar 18 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
React中使用UMEditor的方法示例
Dec 27 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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
思想汇报范文
2013/11/04 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
优秀学生事迹材料
2014/02/08 职场文书
火车的故事教学反思
2014/02/11 职场文书
店面销售职位的职责
2014/03/09 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python