首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jQuery 页面载入进度条 (必有一款适合你-综合搜集版)

2013-10-21 
jQuery 页面载入进度条 (必有一款适合你----综合搜集版)??上图展示了传统 Wordpress 模板在浏览器中的载入

jQuery 页面载入进度条 (必有一款适合你----综合搜集版)
?

?

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

?

jQuery 页面载入进度条 (必有一款适合你-综合搜集版)

?

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

先来看一个演示：地址?。

?

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

Html代码??jQuery 页面载入进度条 (必有一款适合你-综合搜集版)

  1. <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">??
  2. <html?xmlns="http://www.w3.org/1999/xhtml">??
  3. <head>??
  4. <title>Loading?Status?Bar</title>??
  5. <meta?name="robots"?content="noindex,follow"?/>??
  6. <script?type="text/javascript"?src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>??
  7. <script?type="text/javascript">??
  8. ????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>");??
  9. </script>??
  10. ??
  11. <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/></head>??
  12. <body>??
  13. <noscript>您的浏览器不支持?Javascript</noscript>??
  14. ??
  15. <div?id="loading">??
  16. ????<div></div>??
  17. </div>??
  18. ??
  19. <??for($i=0;$i<100000;$i++){?echo?$i;}??>??
  20. ????<script?type="text/javascript">$("#loading?div").animate({width:"16px"}).text("16%")</script>??
  21. <??echo?'<br><br><br>';?for($i=0;$i<100000;$i++){?echo?$i;}??>??
  22. ??
  23. <script?type="text/javascript">setTimeout(function(){$("#loading?div").animate({width:"34px"}).text("34%")},500)</script>??
  24. <script?type="text/javascript">setTimeout(function(){$("#loading?div").animate({width:"67px"}).text("67%")},1000)</script>??
  25. <script?type="text/javascript">setTimeout(function(){$("#loading?div").animate({width:"82px"}).text("82%")},1500)</script>??
  26. <script?type="text/javascript">setTimeout(function(){$("#loading?div").animate({width:"100px"}).text("100%")},2000)</script>??
  27. <script?type="text/javascript">setTimeout(function(){$("#loading").hide(500)},3000)</script>??
  28. ??
  29. </body>??
  30. </html>??
?

第三种 导向型

?

?

Html代码??jQuery 页面载入进度条 (必有一款适合你-综合搜集版)
  1. <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">??
  2. <html?xmlns="http://www.w3.org/1999/xhtml">??
  3. <head>??
  4. <meta?http-equiv="content-type"?content="text/html;?charset=UTF-8">??
  5. <title>Loading</title>??
  6. <style?type="text/css">??
  7. .proccess{??
  8. ????border:1px?solid;??
  9. ????width:8px;??
  10. ????height:8px;??
  11. ????background:#ffffff;??
  12. ????margin:3px;??
  13. }??
  14. </style>??
  15. ??
  16. <script?language="JavaScript">??
  17. ????var?url?=?'http://deographics.com/';??
  18. </script>??
  19. ??
  20. </head>??
  21. ??
  22. <body??onLoad="location.href?=?url;"?style='overflow:hidden;?overflow-y:hidden'>??
  23. ????<div?align=center>??
  24. ????????<font?class=fontbig>友情提示，页面正在加载中，请等待......</font>??
  25. ????????<div?align="center">??
  26. ????????????<form?method="post"?name="proccess">??
  27. ????????????????<script?type="text/javascript">???
  28. ????????????????????for(i=0;i<30;i++){??
  29. ????????????????????????document.write("<input?class=proccess>");??
  30. ????????????????????}??
  31. ????????????????</script>??
  32. ????????????</form>??
  33. ????????</div>??
  34. ??
  35. ????????<div?align="center">??
  36. ????????????<script?language=JavaScript>??
  37. ????????????????var?p=0,j=0;??
  38. ????????????????var?c=new?Array('lightskyblue','white')??
  39. ????????????????setInterval('proccess();',100)??
  40. ????????????????function?proccess(){??
  41. ????????????????????document.forms.proccess.elements[p].style.background=c[j];?p+=1;??
  42. ????????????????????if(p==30){?p=0;j=1-j;?}??
  43. ????????????????}??
  44. ????????????</script>??
  45. ????????</div>??
  46. ????</div>??
  47. ??
  48. ????<div?align="center">??
  49. ????????<script>??
  50. ????????????if?(document.layers){??
  51. ????????????????document.write('<Layer?src="'?+?url?+?'?"?visibility="hide">?</Layer>');??
  52. ????????????}else?if?(document.all?||?document.getElementById){??
  53. ????????????????document.write('<iframe?src="'?+?url?+?'"?style="visibility:?hidden;"></iframe>');??
  54. ????????????}else{??
  55. ????????????????location.href?=?url;??
  56. ????????????}??
  57. ????????</script>??
  58. ????</div>??
  59. </body>??
  60. </html>??
??第四种 iframe loading
?Html代码??jQuery 页面载入进度条 (必有一款适合你-综合搜集版)
  1. <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01//EN"?"http://www.w3.org/TR/html4/strict.dtd">??
  2. <html?xmlns="http://www.w3.org/1999/xhtml">??
  3. <head>??
  4. <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">??
  5. <title>Iframe?Loading</title>??
  6. </head>??
  7. ??
  8. <body>?????
  9. ????<div?id="load"><img?src="http://sysimages.tq.cn/images/analysis_images/ajax-loader.gif"?/>&nbsp;loading...</div>??
  10. ????<iframe?style="visibility:hidden"?onreadystatechange="stateChangeIE(this)"?onload="stateChangeFirefox(this)"?name="callframe"?id="callframe"?width="420"?height="100"?frameborder="0"?scrolling="no"?marginheight="0"></iframe>??
  11. ??
  12. ????<script>?????
  13. ????????function?stateChangeIE(_frame){??
  14. ????????????if?(_frame.readyState=="interactive"){?//state:?loading?,interactive,?complete??
  15. ????????????????var?loader?=?document.getElementById("load");??
  16. ????????????????loader.innerHTML??=?"";??
  17. ????????????????loader.style.display?=?"none";????
  18. ????????????????_frame.style.visibility?=?"visible";?????
  19. ????????????}?????
  20. ????????}??
  21. ??
  22. ????????function?stateChangeFirefox(_frame){??
  23. ????????????var?loader?=?document.getElementById("load");??
  24. ????????????loader.innerHTML??=?"";??
  25. ????????????loader.style.display?=?"none";????
  26. ????????????_frame.style.visibility?=?"visible";?????
  27. ????????}??
  28. ??
  29. ????????callframe.location.href="http://deographics.com/";??
  30. ????</script>?????
  31. </body>??
  32. </html>??
?解释：?0: (Uninitialized) the send( ) method has not yet been invoked.?
1: (Loading) the send( ) method has been invoked, request in progress.?
2: (Loaded) the send( ) method has completed, entire response received.?
3: (Interactive) the response is being parsed.?
4: (Completed) the response has been parsed, is ready for harvesting.?

0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了?第五种 加载图片?Html代码??jQuery 页面载入进度条 (必有一款适合你-综合搜集版)
  1. <html>??
  2. <head>??
  3. <title>JavaScript图片预加载代码，显示loading</title>??
  4. ??
  5. <style?type="text/css">??
  6. ????div{??
  7. ????????border:#aaaaaa?3px?solid;??
  8. ????????width:200px;??
  9. ????????padding:2px;??
  10. ????????margin:2px?9px;??
  11. ????????font-size:12px;??
  12. ????????line-height:22px;??
  13. ????????color:#999999;??
  14. ????}??
  15. ??
  16. ????.ipt1{??
  17. ????????width:160px;??
  18. ????????font-size:12px;??
  19. ????????color:#1F6478;??
  20. ????????border:#999999?1px?solid;??
  21. ????????margin-left:9px;??
  22. ????}??
  23. ??
  24. ????.ipt2{??
  25. ????????border:#999999?1px?solid;??
  26. ????????margin-left:6px;color:#666666；??
  27. ????}??
  28. ??
  29. ????p{??
  30. ????????margin:0px;??
  31. ????????padding:0px;??
  32. ????????background-image:url(http://www.codefans.net/jscss/demoimg/loading.gif);??
  33. ????????background-position:center;??
  34. ????????background-repeat:no-repeat;??
  35. ????????width:200px;??
  36. ????????height:200px;??
  37. ????????text-align:center;??
  38. ????????font-size:12px;??
  39. ????????color:#999999;??
  40. ????????line-height:26px;??
  41. ????}??
  42. </style>??
  43. ??
  44. <script?language="javascript"?type="text/javascript">??
  45. ????function?preloadimg(url,obj,ipt){??
  46. ????????var?img?=?new?Image();??
  47. ????????obj.innerHTML?=?"<p>Loading...</p>";??
  48. ????????img.onload?=?function(){??
  49. ????????????obj.innerHTML?=?"";??
  50. ????????????obj.style.width?=?String(img.width)+"px";??
  51. ????????????ipt.style.width?=?String(img.width-40)+"px";??
  52. ????????????obj.appendChild(img);??
  53. ????????};??
  54. ??
  55. ????????img.onerror?=?function(){??
  56. ????????????obj.innerHTML="Loading?Fail?!"??
  57. ????????};??
  58. ??
  59. ????????img.src?=?url;?//img.src?一定要写在img.onload之后，否则在IE中会出现问题??
  60. ????}??
  61. ??
  62. ????function?show(){??
  63. ????????var?div?=?document.getElementsByTagName("div")[0];??
  64. ????????var?input?=?document.getElementsByTagName("input");??
  65. ??
  66. ????????preloadimg("http://www.codefans.net/jscss/demoimg/wall9.jpg",div,input[0]);??
  67. ????????input[0].onclick?=?function(){this.value=""};??
  68. ????????input[1].onclick?=?function(){preloadimg(input[0].value,div,input[0]);}??
  69. ????}??
  70. ????window.onload?=?show;??
  71. </script>??
  72. ??
  73. </head>??
  74. ??
  75. <body>??
  76. <div></div><br?/>??
  77. <input?type="text"?value="将图片地址粘贴在这里"?class="ipt1"/><input?type="button"?value="开始加载"?class="ipt2"/>??
  78. </body>??
  79. </html>??
?或者使用?Java代码??jQuery 页面载入进度条 (必有一款适合你-综合搜集版)
  1. <script?src="jquery-1.3.2.min.js"?type="text/javascript"></script>??
  2. <script?src="MinmyLazyload.js"?type="text/javascript"></script>??
  3. <body>??
  4. <img?original="http://justcoding.iteye.com/uploadfiles/20100424-2_20914.jpg">??
  5. <img?original="http://justcoding.iteye.com/uploadfiles/20100423-1_85399.jpg">??
  6. <script?type="text/javascript">$("img").lazyload({?placeholder:?"img-loader.gif",?effect:"fadeIn"?});??
  7. </script>??
  8. </body>???
?minimylazyload.js 在附件中找?第六种 本页?Html代码??jQuery 页面载入进度条 (必有一款适合你-综合搜集版)
  1. <style>??
  2. ????#loading{font-size:12px;color:#FFFFFF;background:#FF0000;position:absolute;top:500px;left:500px;?z-index:1002;?padding:2px?10px?2px?10px}??
  3. </style>??
  4. ??
  5. <body>??
  6. ????<div?id="loading">页面加载中…</div>??
  7. ???????
  8. ????..........??
  9. ???????
  10. ????<script?type="text/javascript">??
  11. ????????document.write('<style>#loading{display:none;}</style>');??
  12. ????</script>??
  13. </body>??
  14. </html>??

读书人精选
热点排行