Jquery 页面载入 进度条

jQuery 页面载入进度条

页面 Loading 条基本人人都会用。它的原理很简单：在页头放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS
隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。

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

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

先来看一个演示：地址。

要得到演示上的进度条效果，首先，引入 jQuery
框架(一定要放在页头 <head> 标签内)。然后在 <body> 标签起始位置放置：

<div
id="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;
}

准备工作到这里就做好了。

接着，请随意发挥，依照你对图二的理解，在模板各个部分的适当位置放置：

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

其中红色数值应该随载入顺序逐步增加，直到 footer.php。另外别忘了在 footer.php 最末尾放上：

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

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

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Loading Status Bar</title>
<meta name="robots" content="noindex,follow" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
document.writeln("<style type=\"text\/css\">#loading{width:100px;height:20px;background:#A0DB0E;padding:5px;position:fixed;left:0;top:0}#loading div{width:1px;height:20px;background:#F1FF4D;font:10px/20px Arial}<\/style>")
</script>

</head>
<body>
<noscript>您的浏览器不支持 Javascript</noscript>
<div id="loading"><div></div></div>
<script type="text/javascript">$("#loading div").animate({width:"16px"}).text("16%")</script>
<script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"34px"}).text("34%")},500)</script>
<script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"67px"}).text("67%")},1000)</script>
<script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"82px"}).text("82%")},1500)</script>
<script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"100px"}).text("100%")},2000)</script>
<script type="text/javascript">setTimeout(function(){$("#loading").hide(500)},3000)</script>
</body>
</html>

posted on 2012-11-15 09:49  canny_strive  阅读(184)  评论(0)  编辑  收藏  举报

导航