基于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 相关文章推荐
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 Javascript
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
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 大数据量及海量数据处理算法总结
2011/05/07 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
python八皇后问题的解决方法
2018/09/27 Python
django session完成状态保持的方法
2018/11/27 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
Python中断多重循环的思路总结
2019/10/04 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
薪酬专员岗位职责
2014/02/18 职场文书
怀念母亲教学反思
2014/04/28 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
2014年团支书工作总结
2014/11/14 职场文书
招标保密承诺书
2015/01/20 职场文书
培训班通知
2015/04/25 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS