用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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
Javascript代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
深入探寻javascript定时器
Jan 02 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
JS访问对象两种方式区别解析
Aug 29 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编程中字符串处理的5个技巧小结
2007/11/13 PHP
PHP技术开发技巧分享
2010/03/23 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
使用TensorFlow实现SVM
2018/09/06 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
医院护理人员的自我评价分享
2013/10/04 职场文书
文秘专业毕业生就业推荐信
2013/11/08 职场文书
小学科学教学反思
2014/01/26 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
Python自动化测试PO模型封装过程详解
2021/06/22 Python