因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢?
基于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="/UploadFiles/2021-04-02/jquery-ui.min.js"><script type="text/javascript">loading('正在加载Chrome Frame',50);</script>
<script type="text/javascript" src="/UploadFiles/2021-04-02/CFInstall.min.js"><script type="text/javascript">loading('正在加载EXTJS',70);</script>
<script type="text/javascript" src="/UploadFiles/2021-04-02/ext-core.js"><script type="text/javascript">loading('正在加载mootools',90);</script>
<script type="text/javascript" src="/UploadFiles/2021-04-02/mootools-yui-compressed.js"><script type="text/javascript">loading('正在加载dojo',100);</script>
<script type="text/javascript" src="/UploadFiles/2021-04-02/dojo.xd.js">
demo下载地址:点击下载
标签:
加载,进度条

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“基于jQuery实现模拟页面加载进度条”

暂无“基于jQuery实现模拟页面加载进度条”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。