JqueryCMS
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少，所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢？
我们知道，页面是从上往下执行的，也就是说我们可以大致估算出在页面的某个位置加载了多少，而后用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 .jindu 2 { 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({c+ 'px' },500, function (){
$( '.loading input' ).val(a);
$( '.loading font' ).text(b);
$( '.loading' ).animate({top: '-32px' },1000, function (){
alert( '页面加载完毕' );
});
});
} else {
$( '.loading .jindu2' ).animate({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下载地址： 点击下载
这个效果已经添加到我的EonerCMS中，想观看效果可以到这里来看： http://saw.caifutang.com/eonercms/
EonerCMS
EonerCMS——做一个仿桌面系统的CMS（十三）
posted @ 2011-12-10 02:29 胡尐睿丶 阅读(1729) | 评论 (7) 编辑
EonerCMS——做一个仿桌面系统的CMS（十二）
posted @ 2011-12-07 02:11 胡尐睿丶 阅读(1833) | 评论 (12) 编辑
EonerCMS——做一个仿桌面系统的CMS（十一）
posted @ 2011-11-21 10:11 胡尐睿丶 阅读(2034) | 评论 (4) 编辑
EonerCMS——做一个仿桌面系统的CMS（十-附最新源码）
posted @ 2011-11-07 01:31 胡尐睿丶 阅读(2423) | 评论 (12) 编辑
EonerCMS——做一个仿桌面系统的CMS（九-附最新源码）
posted @ 2011-11-05 00:13 胡尐睿丶 阅读(2161) | 评论 (18) 编辑
EonerCMS——做一个仿桌面系统的CMS（八-带demo源码下载）
posted @ 2011-10-23 00:13 胡尐睿丶 阅读(2231) | 评论 (13) 编辑
EonerCMS——做一个仿桌面系统的CMS（内附测试地址）
posted @ 2011-10-07 01:04 胡尐睿丶 阅读(5077) | 评论 (65) 编辑
EonerCMS——做一个仿桌面系统的CMS（七）
posted @ 2011-10-05 04:03 胡尐睿丶 阅读(2460) | 评论 (6) 编辑
EonerCMS——做一个仿桌面系统的CMS（六）
posted @ 2011-10-04 03:30 胡尐睿丶 阅读(2104) | 评论 (2) 编辑
EonerCMS——做一个仿桌面系统的CMS（五）
posted @ 2011-10-01 22:09 胡尐睿丶 阅读(1695) | 评论 (4) 编辑
EonerCMS——做一个仿桌面系统的CMS（四）
posted @ 2011-09-28 01:05 胡尐睿丶 阅读(2713) | 评论 (8) 编辑
EonerCMS——做一个仿桌面系统的CMS（三）
posted @ 2011-09-17 01:56 胡尐睿丶 阅读(2960) | 评论 (6) 编辑
EonerCMS——做一个仿桌面系统的CMS（二）
posted @ 2011-09-05 02:57 胡尐睿丶 阅读(4670) | 评论 (26) 编辑
EonerCMS——做一个仿桌面系统的CMS（一）
posted @ 2011-08-30 00:39 胡尐睿丶 阅读(2314) | 评论 (14) 编辑
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息