用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 相关文章推荐
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
js中apply和call的理解与使用方法
Nov 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
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
php支付宝接口用法分析
2015/01/04 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
python实现红包裂变算法
2016/02/16 Python
python读写配置文件操作示例
2019/07/03 Python
德国机车企业:FC-Moto
2017/10/27 全球购物
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
毕业生自荐信
2013/12/14 职场文书
成考报名单位证明范本
2014/01/16 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
婚礼答谢词
2015/01/04 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
导游词之潮音寺
2019/09/26 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
Python+Tkinter制作专属图形化界面
2022/04/01 Python
Go归并排序算法的实现方法
2022/04/06 Golang