正文 

当前位置： 首页 > java > java教程

进度条加载后显示页面

逗比煎饼侠 逗比煎饼侠     2022-09-23     415

关键词：

思路：加入很多图片，以延迟加载时间，实现加载完后显示图片。定义一个外层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进度条加载直到页面重定向

】jQuery进度条加载直到页面重定向【英文标题】：jQueryprogressbarloaduntilpageredirects【发布时间】：2015-10-0504:32:34【问题描述】：我有一个包含一些附属链接的网站，当点击链接时，用户会被带到我网站上的一个临时页面，这个页面... 查看详情

unity_加载页面及进度条(代码片段)

...现）新建一个加载页面场景创建一个滑动条用来表示进度条 再创建一个文本用来显示进度百分比 位置随便摆一下创建一个空对象在空对象上新建挂载脚本 修改代码： 查看详情

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

...常规的解决办法，个人感觉不是很好(不过他实现的加载进度是真实的，他的进度条是可以反映当前未加载页面的剩余内容的---其实这种方法也挺好....不过一般情况下没什么必要吧，如果要做成这样的，用flex更好)。一楼的方法... 查看详情

android webview中的进度条

】androidwebview中的进度条【英文标题】：progressbarinandroidwebview【发布时间】：2019-03-2605:53:18【问题描述】：我正在尝试使用WebViewClient在androidwebview中添加进度条。它显示进度条，文本（加载）和页面的其余部分只是一个空白页面... 查看详情

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

...表示，当加载完成的时候，再来显示内容。推荐一个制作进度条的网站icons8.com/preloaders/，制作进入条有以下几种方法。这种方法实现进度条简单粗暴，但是不是真实的。所以开发中一般不用这个。我们通过jquery来实现，这个方... 查看详情

动画进度条以显示网页的进度

】动画进度条以显示网页的进度【英文标题】：animatingprogressbartoshowtheprogressofwebpage【发布时间】：2013-08-1202:20:56【问题描述】：我的页面顶部有一个进度条，我希望该条显示网页加载的进度。当整个页面加载时，我希望栏显示10... 查看详情

单击页面上的任意位置后，Android中的进度条未显示

】单击页面上的任意位置后，Android中的进度条未显示【英文标题】：ProgressbarinAndroidnotgettingdisplayafterclickanywhereonthepage【发布时间】：2013-02-2217:39:04【问题描述】：我的android应用中有一个webview和一个按钮。我正在显示ProgressDialog... 查看详情

计算并显示页面加载进度百分比

】计算并显示页面加载进度百分比【英文标题】：Calculate&Displaypercentageofprogressofpageload【发布时间】：2016-02-2214:30:01【问题描述】：我有一个加载器，它在页面开始加载时加载。我需要在其中显示完成百分比。我的应用程序包... 查看详情

从数据库中检索数据时如何显示加载动画或进度条？

】从数据库中检索数据时如何显示加载动画或进度条？【英文标题】：Howtoshowloadinganimationsorprogressbarswhenretrievedatafromdatabase?【发布时间】：2015-04-3017:30:41【问题描述】：每次访问此页面时，我都会从数据库中检索大约15,000行。该... 查看详情

flash网站加载太慢,如何加进度条

...flash过大，很久都打不开，页面程空白状，问：如何加入进度条，要自动跳转的，是用flash做还是代码做？？求高手解救啊，不会吝啬分数的先用flash做一个加载界面，这个界面只包含加载背景和加载进度条，内容体积将后很小，... 查看详情

c#怎么实现页面提示加载中进度

...进图条，可以设置他的最小值最大值，然后根据数据显示进度，如果不确定进度的话，进度条就是一直在动。 参考技术Bjs同样可以实现，页面js提交后，在返回数据没有返回时，隐藏div"加载中。。。"设置为block 参考技术... 查看详情

网页加载进度条的实现

本次主要介绍一下网页加载进度的实现。如下图，在页面加载的时候，上方红色的进度条网页加载进度的好处是能够更好的反应当前网页的加载进度情况，loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程。但是... 查看详情

vue----页面加载进度条

参考技术A我测试使用的是脚手架2有的时候当我们页面请求数据较慢的时候，我们就需要让页面有个加载进度条，让用户体验感更加友善 查看详情

unity使用ugui实现王者荣耀ui界面加载页面（进度条）(代码片段)

...用UGUI实现王者荣耀UI界面（一）】加载页面（进度条）1.素材准备2.界面分析3.打开UnityHub创建项目4.开始搭建UI1.准备工作2.背景图片3.导入素材4.配置背景图片5.进度条显示UI搭建6.脚本编写7.演示5.打包结语【Unity使... 查看详情

unity使用ugui实现王者荣耀ui界面加载页面（进度条）(代码片段)

...用UGUI实现王者荣耀UI界面（一）】加载页面（进度条）1.素材准备2.界面分析3.打开UnityHub创建项目4.开始搭建UI1.准备工作2.背景图片3.导入素材4.配置背景图片5.进度条显示UI搭建6.脚本编写7.演示5.打包结语【Unity使... 查看详情

如何停止 Android webView swipeToRefresh 加载进度条？

】如何停止AndroidwebViewswipeToRefresh加载进度条？【英文标题】：HowtoStopAndroidwebViewswipeToRefreshloadingprogressbar?【发布时间】：2018-01-0115:41:10【问题描述】：注意：这个问题已经被问过here.，但没有得到任何答案，所以我决定用我的代... 查看详情

显示进度条，直到 UITableView 加载所有 Cell

】显示进度条，直到UITableView加载所有Cell【英文标题】：ShowprogressBaruntilUITableViewloadallCell【发布时间】：2021-11-0605:05:32【问题描述】：我正在使用Swift5构建一个应用程序。我用UITableView创建了一个视图。我需要显示进度条，直到... 查看详情

c#winform加载子窗体很慢如何用进度条显示

...个页面，请问各位高手，这个问题应该怎样解决？怎样用进度条显示？参考技术A开线程用另外一个线程控制进度条，当前进程去加载子窗体难说。。要看你是怎么加载的。。而且还要看你是加载的什么东西。。。 查看详情