`

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

 
阅读更多

 

链接主题：

预加载图片

延迟加载图片 Lazy Load

 

javascript图片浏览器的核心——图片预加载

 

 

 
第一种方法：

 

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

 

loading Process traditional

 

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

 

new loading bar

 

如果我们在页面的不同位置放置多个 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>

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

 

 

第二种

 

 

Html代码  收藏代码
  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代码  收藏代码
  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代码  收藏代码
  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代码  收藏代码
  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代码  收藏代码
  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代码  收藏代码
  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>  
分享到：
| JAVA跳出多层循环
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery进度条载入特效.rar

    《jQuery进度条载入特效详解》 在网页开发中，用户界面的交互体验至关重要，而进度条载入特效就是提升用户体验的一种有效手段。它能够实时显示任务的完成进度，让用户了解操作状态，增加等待的可预测性，从而降低...

    jQuery 页面载入进度条实现代码

    为了解决这一问题，我们可以采用jQuery来创建一个页面载入进度条，以此来显示页面加载的进度，增强用户体验。"jQuery 页面载入进度条实现代码"这个主题就是关于如何使用jQuery和CSS来构建这样一个功能。 首先，为了...

    jquery进度条载入特效.zip

    在这个“jquery进度条载入特效.zip”压缩包中，包含的是一种使用jQuery实现的进度条加载效果，这在网页加载、数据处理或上传下载场景中常见，可以提升用户体验。 首先，我们要理解进度条的基本概念。进度条是一种UI...

    基于jQuery+CSS3进度条载入特效

    【jQuery+CSS3进度条载入特效详解】 在网页设计中，进度条是一个常见的元素，它用于指示某个任务或过程的完成状态，如文件上传、数据加载等。使用jQuery和CSS3来创建进度条载入特效，可以实现更加动态、交互性更强...

    30 个 jQuery & CSS3 加载动画和进度栏插件

    在这些30个加载动画和进度栏插件中，你可以找到适合不同场景的应用。例如，有些插件适用于全屏加载动画，如“FullPage Loading Spinner”，它在页面加载时占据整个屏幕，提供明显的加载指示；而“Minimalistic ...

    jquery进度条载入特效特效代码

    标题中的“jquery进度条载入特效特效代码”指的是使用jQuery库实现的一种视觉效果，它通常在数据加载或处理过程中展示进度，以提供用户反馈。jQuery是一个广泛使用的JavaScript库，简化了DOM操作、事件处理和动画...

    页面载入缓冲效果，页面缓冲特效

    在网页设计中，用户体验是至关重要的一个环节，而页面载入缓冲效果就是提升用户体验的一种巧妙方式。当用户点击链接或提交表单时，他们通常希望看到的不是枯燥无味的空白页面，而是有一个动态的、视觉上吸引人的加载...

    jquery-ui-1.9.2下载资源包

    jQuery UI 是基于 jQuery JavaScript 库的一个扩展，它提供了一系列可定制的用户界面组件，包括对话框、拖放功能、日期选择器、进度条、排序列表等。这个“jquery-ui-1.9.2下载资源包”包含了实现这些功能所需的全部...

    jQuery EasyUI ProgressBar进度条组件

    ProgressBar（进度条）组件，这个还是挺好玩的，我们在自己做点什么的时候经常能用到，比如上传下载文件、导入导出文档啊、载入网页等等。 应用场景很多，使用起来还很简单。 示例： &lt;!DOCTYPE html&gt; &lt;...

    jquery多彩百分比投票效果.zip

    jquery多彩百分比投票效果是一款多种颜色展示的百分比投票显示效果，载入页面是以动态的效果显示百分比对应的进度条，可以自定义颜色与数量，在js里面定义百分比的数值与颜色代码，很不错的一个百分比展示效果。

    Ajax页面载入，等待特效

    等待特效有很多种形式，如旋转的加载图标、进度条、模糊背景等，它们都能有效传达“正在加载”的信息。在描述中提到的“只有你想不到的ajax等待特效，没有做不到的等待特效”，意味着这些特效设计的多样性和创新性，...

    CSS3 引入jquery实现页面加载的LOADING效果.rar

    CSS3 引入jquery实现页面加载的LOADING效果，就是一个载入动画，一个加载的进度条效果，圆形小圆点在不断的旋转，当加载完毕后，自动消失，本页面由HTML5技术和jquery共同实现，LOADING和页面显示两者之间同样也加入...

    jQuery_EasyUI中文帮助手册（带目录）

    EasyUI是一种基于jQuery的前端框架，它为开发人员提供了一套丰富的UI组件，以帮助快速构建现代化、交互式的Web应用。jQuery EasyUI中文帮助手册是一个全面的指导文档，它详细介绍了EasyUI框架的各种组件以及如何使用...

    CSS3 引入jquery实现页面加载的LOADING效果

    CSS3 引入jquery实现页面加载的LOADING效果，就是一个载入动画，一个加载的进度条效果，圆形小圆点在不断的旋转，当加载完毕后，自动消失，本页面由HTML5技术和jquery共同实现，LOADING和页面显示两者之间同样也加入...

    jqueryajax jquery ajax

    **jQuery AJAX** 是一个在Web开发中广泛使用的JavaScript库，由John Resig于2006年创建。jQuery简化了JavaScript中的异步HTTP（Ajax）请求，使得开发者能够轻松地与服务器进行数据交互，实现页面的局部刷新，提高...

    载入图标(loading)

    1. 动态图标：最常见的是动态GIF格式的载入图标，它们通过连续播放一系列图像来呈现动态效果，如旋转的圆圈、填充的进度条等。这些图标可以是简单的几何形状，也可以是定制的动画，如品牌标识或与网站主题相关的元素...

    js等待提示，页面提交等待载入效果

    在网页开发中，"js等待提示"是一种用户体验优化技术，主要目的是在页面处理大量数据或者进行异步操作时，向用户展示一个加载或等待的提示，以告知用户系统正在运行中，避免用户误认为页面卡死。这个过程通常涉及到...

    Jquery easy ui 中文帮助手册

    **jQuery Easy UI 中文帮助手册** 是一份详细指导开发者如何使用 jQuery Easy UI 框架的文档，旨在帮助用户更好地理解和应用这个强大的前端开发工具。jQuery Easy UI 是基于 jQuery 的一个轻量级、易于使用的组件库...

Magicbox
Global site tag (gtag.js) - Google Analytics