因为我们无法通过任何方法获取整个页面的大小和当前加载了多少，所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢？
我们知道，页面是从上往下执行的，也就是说我们可以大致估算出在页面的某个位置加载了多少，而后用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下载地址：点击下载
这个效果已经添加到我的EonerCMS中，想观看效果可以到这里来看：http://saw.caifutang.com/eonercms/
本文转自胡尐睿丶博客园博客，原文链接：http://www.cnblogs.com/hooray/archive/2011/12/18/2291550.html，如需转载请自行联系原作者
