当前位置：Gxlcms > css > 如何在进度条加载后显示页面

如何在进度条加载后显示页面

时间：2021-07-01 10:21:17 帮助过：61人阅读

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

  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. background: url(loading.gif);
  19. position: absolute;
  20. top: 0;
  21. left: 0;
  22. bottom: 0;
  23. right: 0;
  24. margin: auto;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">
  30. <img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">
  31. <img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">
  32. <img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">
  33. <img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">
  34. <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
  35. <script type="text/javascript">
  36. $(function(){
  37. var loading='<p class="loading"><p class="pic"></p></p>';
  38. $('body').append(loading);
  39. setInterval(function(){
  40. $('.loading').fadeOut();
  41. },3000)
  42. })
  43. </script>
  44. </body>
  45. </html>

知识点：

p居中：

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

2.

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

  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. background: url(loading.gif);
  19. position: absolute;
  20. top: 0;
  21. left: 0;
  22. bottom: 0;
  23. right: 0;
  24. margin: auto;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <p class="loading">
  30. <p class="pic"></p>
  31. </p>
  32. <img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">
  33. <img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">
  34. <img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">
  35. <img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">
  36. <img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">
  37. <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
  38. <script type="text/javascript">
  39. document.onreadystatechange=function(){
  40. if(document.redayState=='complete'){
  41. $('loading').fadeOut();
  42. }
  43. }
  44. </script>
  45. </body>
  46. </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. <p class="loading">
  78. <p class="pic">
  79. <i></i>
  80. <i></i>
  81. <i></i>
  82. <i></i>
  83. <i></i>
  84. </p>
  85. </p>
  86. <img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">
  87. <img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">
  88. <img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">
  89. <img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">
  90. <img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">
  91. <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
  92. <script type="text/javascript">
  93. document.onreadystatechange=function(){
  94. if(document.redayState=='complete'){
  95. $('loading').fadeOut();
  96. }
  97. }
  98. </script>
  99. </body>
  100. </html>

知识点：

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

2.infinite:无限循环

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

4.@keyframes 动画名称{

0%{

}

100%{

}

}

以上就是如何在进度条加载后显示页面的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！