基于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 相关文章推荐
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
vue组件挂载到全局方法的示例代码
Aug 02 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
python读取word文档的方法
2015/05/09 Python
Python中super关键字用法实例分析
2015/05/28 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
员工安全承诺书
2014/05/22 职场文书
北京奥运会主题口号
2014/06/13 职场文书
小学语文教学反思范文
2016/03/03 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
SQL语句多表联合查询的方法示例
2022/04/18 MySQL