码迷,mamicode.com
首页 > 其他好文 > 详细

进度条加载后显示页面

时间:2017-10-18 21:44:52      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:间隔   blog   dex   min   .com   attr   func   设置   block   

思路:加入很多图片,以延迟加载时间,实现加载完后显示图片。定义一个外层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

4.@keyframes 动画名称{

0%{

}

100%{

}

}

 
 

进度条加载后显示页面

标签:间隔   blog   dex   min   .com   attr   func   设置   block   

原文地址:http://www.cnblogs.com/chaofei/p/7688912.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!