基于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 toggleClass 实现鼠标移上变色
May 14 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
Angular2入门--架构总览
Mar 29 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 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
德劲1103二次变频版的打磨
2021/03/02 无线电
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
php生成图形验证码几种方法小结
2013/08/15 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
自制PHP框架之设计模式
2017/05/07 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
再论Javascript的类继承
2011/03/05 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
python获取android设备的GPS信息脚本分享
2015/03/06 Python
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
如何将python中的List转化成dictionary
2016/08/15 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
一套PHP的笔试题
2013/05/31 面试题
介绍一下EJB的体系结构
2012/08/01 面试题
生产总经理岗位职责
2013/12/19 职场文书
探亲邀请信范文
2014/01/30 职场文书
买房协议书
2014/04/11 职场文书
化工实习心得体会
2014/09/09 职场文书
2015国庆节感想
2015/08/04 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript