jquery实现页面加载进度条(转)

实现原理：

根据页面执行js的顺序将遮罩层和loading图片最先显示出来，等到页面加载完成后，用js控制图片消失。既在网页的头部放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，根据浏览器的载入顺序来实现的简易 Loading 状态条。

比较简单的步骤是：

1、首先在<body></body>开始的地方放置

<divid="loading"></div>

2、在<head>和</head>之间放置样式和jquery框架

<styletype="text/css">#loading{z-index:1;padding:5px 0 5px 29px;background:url(images/loadingwy.gif) no-repeat 10px top;left:0;top:0;width:90px;position:fixed;height:21px}
</style>
<scripttype="text/javascript"src="images/jquery.js"></script>

3、在页面的底部放置

<script type="text/javascript">$("#loading").fadeOut()</script>

一个在线生成loading图片的网站:http://preloaders.net/

进一步的分析

loading Process traditional

上图展示了传统 Wordpress 模板在浏览器中的载入顺序，Loading 条的出现和消失分布于头尾。

new loading bar

如果我们在页面的不同位置放置多个 JS ，每个 JS 用于逐步增加 Loading 条的宽度，那么这个 Loading 条无疑会更具实用价值。它在一定程度上缓解了访客等待载入的枯燥感，同时还能客观反映页面载入的进度。若再配以 jQuery 内建的动画效果，其完全可以与浏览器自带的状态条媲美。
1、引入 jQuery 框架(一定要放在页头 <head> 标签内)。然后在 <body> 标签起始位置放置：

<divid="loading"><div></div></div>css代码为
#loading {
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}

2、在模板各个部分的适当位置放置

<scripttype="text/javascript">$("#loading div").animate({width:"16px"})</script>

3、在 footer.php 最末尾放上：

<scripttype="text/javascript">$("#loading").fadeOut()</script>

用于载入完毕后隐藏进度条。

加入百分比提示的进度条

1、首先在你要显示进度条的位置加上标签，宽度初始设置0px，然后运用jquery的animate动画效果在相应的位置一个一个增加宽度，比如在正文顶部加上如下：

<script type="text/javascript">$("#loading").animate({width:"30px"}).text("30%")</script>

#loading是进度推进部分，并显示文字"30%"。按照图里一个一个加到相应位置，改下width和text属性就基本实现进度条了。

进度条是在这个基础上改进的，我的进度条结构是这样的：

<divid="loadbg"></div>
<divid="reloading"><divid="loadfull"></div><divid="loadpercent"></div><divid="loadtext">努力载入中.....</div>
</div>

2、百分比显示和"加载完毕"以及让进度条消失的jquery代码:

//进度条
functionremindload(loadpercent) {var text="努力加载ing..."
if(loadpercent) {
$('#loadtext').html(String(loadpercent) + "%"+text); //显示百分比
}
}var i = 0;functionloadover() {if (i > 100) { //当大于100%时消失进度条
$('#loadtext').html("加载完毕！").fadeIn("slow");//加载完毕提示
$('#loadpercent').animate({width:"0px"},2000); //减少#loadpercent的宽度，消失效果
$('#loadbg,#reloading>div').fadeOut(1600);//进度条消失
return;
}if (i <= 100) { //百分比计数，延迟加载
setTimeout("loadover()", 100);
remindload(i);
i=i+5;
}
}
$(document).ready(function() {
loadover();
});

3、css代码

/*loading*/#loadbg{z-index:1;left:400px;top:255px;position:fixed;background:#d2d2d2;width:400px;height:88px;opacity:.6}#reloading{z-index:1;left:400px;top:255px;position:fixed;}#reloading div{position:absolute;}#loadfull,#loadpercent{height:28px;margin:30px 0 0 50px;}#loadfull{background:white;width:300px;opacity:.7}#loadpercent{background:#000;width:0px;opacity:.8}#loadtext{font-size:14px;z-index:2;width:300px;color:#fff;padding:35px 0 5px 59px;}

4、判断代码修改一下上面的loadover函数：

function loadover(){if($.browser.msie&&!$.support.style)//判断的是IE内核，IE9却是直接不在此列，HOHO~
{
$('#loadtext').html("请使用<a href='http://www.google.com/chrome/index.html?hl=zh_cn&brand=CHMA&utm_campaign=zh_cn&utm_source=zh_cn-ha-apac-zh_cn-bk&utm_medium=ha' target='_blank'>Chrome</a>或者<a href='http://firefox.com.cn/' target='_blank'>Firefox</a>获得最佳浏览体验！").fadeIn("slow");setTimeout(function() { $('#loadbg,#reloading>div,#loadpercent').fadeOut(1600);}, 5000);  //5秒后消失
}
else if (i>100){$('#loadtext').html("加载完毕！").fadeIn("slow");//加载完毕提示
$('#loadpercent').animate({width:"0px"},2000); //减少#loadpercent的宽度，消失效果
$('#loadbg,#reloading>div').fadeOut(1600);
return;
}

使用遮罩层的具体案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>fortestҳ</title>
<linkhref="../style/css.css"rel="stylesheet"type="text/css" />
<scripttype="text/javascript"src="../js/jquery/jquery-1.3.2.min.js"></script>
<scripttype="text/javascript"src="../js/jquery.bgiframe.min.js"></script>
<scripttype="text/javascript"src="../js/jquery.modal.js"></script>
<styletype="text/css">#grey_div{position:absolute;background:#cccccc;left:0px;top:0px;filter:Alpha(Opacity=30);
/*IE*/-moz-opacity:0.4;
/*Moz + FF*/opacity:0.4;
}#xs3{background:#FFFFFF;position:absolute;border:1px solid #CC66CC;display:none;
}
</style>
</head>
<body>
<divid="xs3"><tablewidth="300"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="107"height="81">&nbsp;</td><!--loading的图片--><tdwidth="220"height="19"><imgsrc="../images/loading.gif"width="220"height="19" /></td><tdwidth="108"height="81">&nbsp;</td></tr><tr><tdheight="30"colspan="3"style="text-align:center; color:#FF0000; font-size:14px;">页面加载中...</td></tr></table>
</div>
<scripttype="text/javascript">
//一开始就显示遮罩和loading图片
$.md({modal:"#xs3"});</script>
<divstyle="width:1440px;height:900px;overflow:hidden;">测试页面</div>
<scripttype="text/javascript">
//页面加载完成时去除遮罩
$("#xs3").remove();
$("#grey_div").remove();</script>
</body>
</html>

jquery实现页面加载进度条(转)相关推荐

js网页顶部线性页面加载进度条,jquery头部线性进度条总结
前言网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 头部LoadingBar线性进度条总结上面的代码只是静态效 ...
浅谈前端实现页面加载进度条以及 nprogress.js 的实现
以前在 Vue 的项目用了 nprogress 这个插件,一直对于其如何得知加载进度充满好奇,最近又看到了「前端如何实现页面加载进度条」这个问题,今天周六恰好一探究竟.以下仅为一家之言,如有异议,欢迎 ...
Vue项目实战06：nprogress页面加载进度条
博客: https://lvsige.top/ nprogress页面加载进度条前言很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们 ...
php+页面加载进度,基于jQuery实现模拟页面加载进度条_jquery
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
jquery ajax加载页面进度条,基于jQuery实现模拟页面加载进度条
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
Vue：页面加载进度条
这段时间在踩Ant design pro Vue的坑,发现了个在手机端页面上经常出现的,加载进度条,效果蛮不错的!记录下来. cnpm install --save nprogress import ...
页面加载进度条改进版
html部分: <div id="loadingbg"></div> <div id="test"><div>& ...
vue 判断页面加载完成_Vue实战040：nprogress页面加载进度条
前言很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们希望能知道网页加载的进度,这样我们就能做到心中有数是否继续等待页面加载.这个功能我 ...
php 页面加载进度条,HTML5/CSS3 网页加载进度条的实现，下载进度条等经典案例
今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...

jquery实现页面加载进度条(转)

jquery实现页面加载进度条(转)相关推荐

最新文章

热门文章