进度条加载后显示页面

Posted 逗比煎饼侠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了进度条加载后显示页面相关的知识，希望对你有一定的参考价值。

思路：加入很多图片，以延迟加载时间，实现加载完后显示图片。定义一个外层DIV，覆盖住图片，在内层DIV中引入加载时显示的图片，让内层DIV居中在页面上，利用setInterval定时器设置3秒后将外层DIV隐藏，从而显示图片，达到加载完后显示页面的效果。

 

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <style type="text/css">  
  6.         .loading{  
  7.             width: 100%;  
  8.             height: 100%;  
  9.             position: fixed;  
  10.             top: 0;  
  11.             left: 0;  
  12.             z-index: 100;  
  13.             background: #fff;  
  14.         }  
  15.         .loading .pic{  
  16.             width: 64px;  
  17.             height: 64px;  
  18.               
  19.             background: url(loading.gif);  
  20.             position: absolute;  
  21.             top: 0;  
  22.             left: 0;  
  23.             bottom: 0;  
  24.             right: 0;  
  25.             margin: auto;  
  26.         }  
  27.     </style>  
  28. </head>  
  29. <body>  
  30.   
  31.   
  32.   
  33. <img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">  
  34. <img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">  
  35. <img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">  
  36. <img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">  
  37. <img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">  
  38.   
  39. <script type="text/javascript" src="jquery-1.8.2.min.js"></script>  
  40. <script type="text/javascript">  
  41.     $(function(){  
  42.   
  43.         var loading=‘<div class="loading"><div class="pic"></div></div>‘;  
  44.         $(‘body‘).append(loading);  
  45.         setInterval(function(){  
  46.             $(‘.loading‘).fadeOut();  
  47.         },3000)  
  48.     })  
  49. </script>  
  50. </body>  
  51. </html>  

 

知识点：

DIV居中：

 
 
  1. position: absolute;  
  2. top: 0;  
  3. left: 0;  
  4. bottom: 0;  
  5. right: 0;  
  6. margin: auto;  

 

2.

思路：利用状态事件监听的方法：onreadystatechange，判断redayState，实现加载完后显示页面的效果

 

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <style type="text/css">  
  6.         .loading{  
  7.             width: 100%;  
  8.             height: 100%;  
  9.             position: fixed;  
  10.             top: 0;  
  11.             left: 0;  
  12.             z-index: 100;  
  13.             background: #fff;  
  14.         }  
  15.         .loading .pic{  
  16.             width: 64px;  
  17.             height: 64px;  
  18.               
  19.             background: url(loading.gif);  
  20.             position: absolute;  
  21.             top: 0;  
  22.             left: 0;  
  23.             bottom: 0;  
  24.             right: 0;  
  25.             margin: auto;  
  26.         }  
  27.     </style>  
  28. </head>  
  29. <body>  
  30.   
  31. <div class="loading">  
  32.     <div class="pic"></div>  
  33. </div>  
  34.   
  35.   
  36. <img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">  
  37. <img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">  
  38. <img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">  
  39. <img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">  
  40. <img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">  
  41.   
  42. <script type="text/javascript" src="jquery-1.8.2.min.js"></script>  
  43. <script type="text/javascript">  
  44.     document.onreadystatechange=function(){  
  45.         if(document.redayState==‘complete‘){  
  46.             $(‘loading‘).fadeOut();  
  47.         }  
  48.     }  
  49. </script>  
  50. </body>  
  51. </html>  

知识点：

 

通过onreadystatechange事件监听readyState的状态，我们只需要关心最后一个状态‘complete‘，当达到complete状态，说明加载成功。

3.

思路：利用CSS3实现动画效果，达到加载 完后显示页面。同样采用onreadystatechange事件监听的方法，不同的是实现了一种动态效果。

  利用i标签，加入CSS样式，实现5个间隔开的矩形。利用animation每隔1.2s循环一次，无限循环。每个i标签，延时0.1s在Y方向上伸长缩短，达到动画效果。

 
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <style type="text/css">  
  6.         .loading{  
  7.             width: 100%;  
  8.             height: 100%;  
  9.             position: fixed;  
  10.             top: 0;  
  11.             left: 0;  
  12.             z-index: 100;  
  13.             background: #fff;  
  14.         }  
  15.         .loading .pic{  
  16.             width: 50px;  
  17.             height: 50px;  
  18.             position: absolute;  
  19.             top: 0;  
  20.             left: 0;  
  21.             bottom: 0;  
  22.             right: 0;  
  23.             margin: auto;  
  24.         }  
  25.         .loading .pic i{  
  26.             display: block;  
  27.             float: left;  
  28.             width: 6px;  
  29.             height: 50px;  
  30.             background: #399;  
  31.             margin: 0 2px;  
  32.             -webkit-transform: scaleY(0.4);  
  33.                 -ms-transform: scaleY(0.4);  
  34.                     transform: scaleY(0.4);  
  35.             -webkit-animation: load 1.2s infinite;  
  36.                     animation: load 1.2s infinite;  
  37.         }  
  38.         .loading .pic i:nth-child(2){  
  39.             -webkit-animation-delay: 0.1s;  
  40.                     animation-delay: 0.1s;  
  41.         }  
  42.         .loading .pic i:nth-child(3){  
  43.             -webkit-animation-delay: 0.2s;  
  44.                     animation-delay: 0.2s;  
  45.         }  
  46.         .loading .pic i:nth-child(4){  
  47.             -webkit-animation-delay: 0.3s;  
  48.                     animation-delay: 0.3s;  
  49.         }  
  50.         .loading .pic i:nth-child(5){  
  51.             -webkit-animation-delay: 0.4s;  
  52.                     animation-delay: 0.4s;  
  53.         }  
  54.         @-webkit-keyframes load{  
  55.             0%,40%,100%{  
  56.                 -webkit-transform: scaleY(0.4);  
  57.                         transform: scaleY(0.4);  
  58.             }  
  59.             20%{  
  60.                 -webkit-transform: scaleY(1);  
  61.                         transform: scaleY(1);  
  62.             }  
  63.         }  
  64.         @keyframes load{  
  65.             0%,40%,100%{  
  66.                 -webkit-transform: scaleY(0.4);  
  67.                         transform: scaleY(0.4);  
  68.             }  
  69.             20%{  
  70.                 -webkit-transform: scaleY(1);  
  71.                         transform: scaleY(1);  
  72.             }  
  73.         }  
  74.     </style>  
  75. </head>  
  76. <body>  
  77.   
  78. <div class="loading">  
  79.     <div class="pic">  
  80.         <i></i>  
  81.         <i></i>  
  82.         <i></i>  
  83.         <i></i>  
  84.         <i></i>  
  85.     </div>  
  86. </div>  
  87. <img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">  
  88. <img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">  
  89. <img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">  
  90. <img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">  
  91. <img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">  
  92. <script type="text/javascript" src="jquery-1.8.2.min.js"></script>  
  93. <script type="text/javascript">  
  94.     document.onreadystatechange=function(){  
  95.         if(document.redayState==‘complete‘){  
  96.             $(‘loading‘).fadeOut();  
  97.         }  
  98.     }  
  99. </script>  
  100. </body>  
  101. </html>  
知识点：

 

1.scale:伸长缩短。scaleX:x方向。scaleY:y方向。

2.infinite:无限循环

3.animate-delay:0.1s  延时0.1s

[email protected] 动画名称{

0%{

}

100%{

}

}

 
 

以上是关于进度条加载后显示页面的主要内容，如果未能解决你的问题，请参考以下文章

用JQuery实现页面Loading的效果，即：当页面加载完成前显示Loading的进度条，全部加载完成之后进度条消失

Unity_加载页面及进度条

前端页面加载进度条的制作

jQuery进度条加载直到页面重定向

android webview中的进度条

AngularJS - 进度条为 100% 后重新加载页面 5 秒