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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body> <noscript>您的浏览器不支持 Javascript</noscript> <div id="loading"><div></div></div> <? for($i=0;$i<100000;$i++){ echo $i;} ?> <script type="text/javascript">$("#loading div").animate({width:"16px"}).text("16%")</script> <? echo '<br><br><br>'; for($i=0;$i<100000;$i++){ echo $i;} ?> <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> <!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><noscript>您的浏览器不支持 Javascript</noscript><div id="loading"><div></div></div><? for($i=0;$i<100000;$i++){ echo $i;} ?><script type="text/javascript">$("#loading div").animate({width:"16px"}).text("16%")</script><? echo '<br><br><br>'; for($i=0;$i<100000;$i++){ echo $i;} ?><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><!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> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Loading</title> <style type="text/css"> .proccess{ border:1px solid; width:8px; height:8px; background:#ffffff; margin:3px; } </style> <script language="JavaScript"> var url = 'http://deographics.com/'; </script> </head> <body onLoad="location.href = url;" style='overflow:hidden; overflow-y:hidden'> <div align=center> <font class=fontbig>友情提示，页面正在加载中，请等待......</font> <div align="center"> <form method="post" name="proccess"> <script type="text/javascript"> for(i=0;i<30;i++)document.write("<input class=proccess>")</script> </form> </div> <div align="center"> <script language=JavaScript> var p=0,j=0; var c=new Array('lightskyblue','white') setInterval('proccess();',100) function proccess(){ document.forms.proccess.elements[p].style.background=c[j]; p+=1; if(p==30){ p=0;j=1-j; } } </script> </div> </div> <div align="center"> <script> <!-- if (document.layers){ document.write('<Layer src="' + url + ' " visibility="hide"> </Layer>'); }else if (document.all || document.getElementById){ document.write('<iframe src="' + url + '" style="visibility: hidden;"></iframe>'); }else{ location.href = url; } //--> </script> </div> </body> </html> <!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><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Loading</title><style type="text/css">.proccess{border:1px solid;width:8px;height:8px;background:#ffffff;margin:3px;}</style><script language="JavaScript">var url = 'http://deographics.com/';</script></head><body onLoad="location.href = url;" style='overflow:hidden; overflow-y:hidden'><div align=center><font class=fontbig>友情提示，页面正在加载中，请等待......</font><div align="center"><form method="post" name="proccess"><script type="text/javascript"> for(i=0;i<30;i++)document.write("<input class=proccess>")</script></form></div><div align="center"><script language=JavaScript>var p=0,j=0;var c=new Array('lightskyblue','white')setInterval('proccess();',100)function proccess(){document.forms.proccess.elements[p].style.background=c[j]; p+=1;if(p==30){ p=0;j=1-j; }}</script></div></div><div align="center"><script><!--if (document.layers){document.write('<Layer src="' + url + ' " visibility="hide"> </Layer>');}else if (document.all || document.getElementById){document.write('<iframe src="' + url + '" style="visibility: hidden;"></iframe>');}else{location.href = url;}//--></script></div></body></html> <style> #loading{font-size:12px;color:#FFFFFF;background:#FF0000;position:absolute;top:500px;left:500px; z-index:1002; padding:2px 10px 2px 10px} </style> </head> <body> <div id="loading">页面加载中…</div> .......... <script type="text/javascript">document.write('<style>#loading{display:none;}</style>');</script> </body> </html>