Web应用中实现页面加载提示

最新推荐文章于 2021-02-13 04:17:06 发布
最新推荐文章于 2021-02-13 04:17:06 发布
阅读量1.5k 收藏
点赞数
文章标签： web border javascript jsp include java
from : http://brofe.javaeye.com/blog/220784

 在Java Web应用中， 当加载一个动态页面时及JSP页面时，如果页面动态数据较多，会有很长一段时间的空白页面，古加上这个页面正在加载的提示，使得应用更加人性化。

  1. processbar.jsp  
  2.   
  3. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  4.     pageEncoding="UTF-8"%>  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  6. <html>  
  7.     <head>  
  8.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  9.         <title>process bar</title>  
  10.         <script type="text/javascript" language="JavaScript">  
  11.               
  12.             //: 判断网页是否加载完成  
  13.             document.onreadystatechange = function () {   
  14.                 if(document.readyState=="complete") {         
  15.                     document.getElementById('divprogressbar').style.display='none';   
  16.                 }  
  17.             }   
  18.               
  19.         </script>  
  20.     </head>  
  21.     <body>  
  22.         <div id="divprogressbar"  
  23.             style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-color: #ffffff; filter: alpha (     opacity =     100 ); z-index: 50000">  
  24.             <div style="text-align: center; padding-top: 200px">  
  25.                 <table align="center" border="1" width="37%" cellspacing="0"  
  26.                     cellpadding="4" style="border-collapse: collapse" bgcolor="#FFFFEC"  
  27.                     height="87">  
  28.                     <tr>  
  29.                         <td bgcolor="#3399FF" style="font-size: 12px;" height="24"  
  30.                             align="center">  
  31.                             友情提示, 数据正在载入中...  
  32.                         </td>  
  33.                     </tr>  
  34.                     <tr>  
  35.                         <td style="font-size: 12px; line-height: 200%" align="center">  
  36.                             网页正在载入数据中.请耐心等待...  
  37.                             <marquee style="border: 1px solid #000000" direction="right"  
  38.                                 width="300" scrollamount="5" scrolldelay="10" bgcolor="#ECF2FF">  
  39.                                 <table cellspacing="1" cellpadding="0">  
  40.                                     <tr height=8>  
  41.                                         <td bgcolor=#3399FF width=8></td>  
  42.                                         <td></td>  
  43.                                         <td bgcolor=#3399FF width=8></td>  
  44.                                         <td></td>  
  45.                                         <td bgcolor=#3399FF width=8></td>  
  46.                                         <td></td>  
  47.                                         <td bgcolor=#3399FF width=8></td>  
  48.                                         <td></td>  
  49.                                     </tr>  
  50.                                 </table>  
  51.                             </marquee>  
  52.                         </td>  
  53.                     </tr>  
  54.                 </table>  
  55.             </div>  
  56.         </div>  
  57.     </body>  
  58. </html>  
  59.   
  60. 然后在另外需要使用的页面中加入如下代码即可：  
  61.   
  62. <jsp:include page="processbar.jsp"></jsp:include>  
  63.   
  64. 注意哦， 只有当页面加载真的需要花费时间的时候才会看到效果。 
描述: 一个简单的HTML测试页面。为了便于效果的演示，该页面中的加载提示永远不会消失，可以修改一下页面中的JS代码。

sclxf
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
WEB中实现页面加载提示
wsrjzhsy0493的博客
12-05 223
在Java Web应用中， 当加载一个动态页面时及JSP页面时，如果页面动态数据较多，会有很长一段时间的空白页面，古加上这个页面正在加载的提示，使得应用更加人性化。 Java代码 processbar.jsp     &lt;%@ page language="java" contentType="text/html; charset=UTF-8"      pageEncoding="UTF-8...
页面中加载页面
weixin_44286765的博客
03-03 108
sidecolumn.html文件中加载css js路径都相对数 id='sidecommon'所在文件的路径 其中sidecolumn中的js操作 要重新用时间委托
js实现一个html页面引入另一个html页面
热门推荐
haogemr的博客
05-05 3万+
通过jq的load方法引入原生js的object标签引入iframe引入import引入(head中引入文件，script中加载内容) 通过jq的load方法引入 <body> <div id="div"></div> <script> $("#div").load("index.html"); <...
给页面加上loading加载效果
HELLO WORLD
06-20 3万+
在页面中载入进度条，是一种常见的特效。它比较实用，当页面的元素比较多的时候，使用它可以让网友不至于等的着急。其原理很简单：在网页的头部放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。 此效果也有插件可实现，不过此次分享的是自定义方法。 效果 demo http://build.gzwhir.com...
JS+CSS实现网页加载中的动画效果
10-19
在实践中，我们使用Django框架来创建一个简单的Web应用。步骤如下： 1. 创建一个新的Django项目，并建立一个名为`app01`的应用，配置路由和静态文件目录。 2. 将loading.gif动图放入静态文件夹下的img子目录。 3. ...
jQuery Div中加载其他页面的实现代码
10-30
在开发Web应用程序时，有时我们需要在一个页面上展示来自其他页面的内容，而无需刷新整个页面。这种需求在构建交互性强、用户体验良好的表单签核系统中尤为常见。jQuery库提供了强大的DOM操作和Ajax功能，使得在Div...
zeroModal弹出层加载提示插件
06-24
总的来说，ZeroModal弹出层加载提示插件是提高Web应用交互性和用户体验的有力工具。通过jQuery的便利性和其自身丰富的功能，开发者可以轻松创建各种弹出提示和加载效果，为用户提供更加顺畅的在线体验。在实际开发中...
基于Python和PyQt5实现访问Web应用程序或网页
04-16
在标题"基于Python和PyQt5实现访问Web应用程序或网页"中，关键点在于使用PyQt5的QtWebEngineWidgets模块。这个模块包含了QWebEngineView组件，它可以作为一个内嵌的Web浏览器，加载并显示网页内容。通过这个组件，...
java 页面加载提示_Web应用中实现页面加载提示
weixin_35090568的博客
02-13 311
processbar.jsppageEncoding="UTF-8"%>process bar//: 判断网页是否加载完成document.onreadystatechange = function () {if(document.readyState=="complete") {document.getElementById('divprogressbar').style.display=...
几种常见的载入中、loading页面效果的实现方法总结
weixin_30856965的博客
10-20 2280
网页加载过程中提示“载入中…”，特别是使用动画效果，可以一个“等待”的温馨提示，用户体验很不错。 刚才花了半个多小时去网上查了下页面正在载入效果的实现方法，觉得有必要记录下. 先说最简单的第一种，原理就是,在网页载入时在页面最中间打入一个层上面显示,"网页正在载入中...."当网页下载完毕,,用JS关闭这个层......。 先在首页HTML最上面...任意位置都行..加入 <DIV ...
网页中常用加载页面的实现原理
King博客
04-09 5188
本文主要是来分析加载页面的实现原理，因为好的加载页面可以提高用户访问的兴趣度，也能让用户远离枯燥的等待；根据网页上各种加载页面，大概总结了下面几种比较常用的实现方法： 1.利用定时器实现加载页面； 2.利用readyState判断实现加载页面； 3.利用滚动条+readyState判断实现加载页面； 4.利用滚动条+onload实现加载页面； 5.利用百分比增加+onload实现加载页面...
如何加载HTML页面页面到另一个界面中
web_zhangxiaoqi的专栏
08-21 1万+
1.第一种：iframe 但是，对于个人经验来说，iframe最好不要用，不仅自适应不太好，而且对于seo优化特别不好 2.第二种：通过jQuery load 事件加载页面。比较简单，但是会刷新界面。不过个人感觉影响不大，可以return false   组织界面刷新。 $(function(){     var aHomePageLi = $('.sidebar-nav').find('u
web网页加载圈之入门篇
前端原创分享，常年坚持记录和分享，全网阅读量超百万
03-07 1191
作为一名web开发者，或多或少都会接触到网页加载圈这个概念。一个网站的加载速度或快或慢，而慢的网页加载速度会给用户非常差的体验，这个时候如果不给用户一点提示信息，那简直糟糕透了。因此，常见的做法，是在页面加载完成之前，给一个过渡效果。那么怎么实现这种效果呢？ 如何知道网页加载完成 DOM给我们提供了这样一个方法document.onreadystatechange。当一个文档的readyS...
前端loading效果的实现
Maogo的专栏
08-23 1万+
说到页面loading效果，现在各种PC端和移动端的应用使用loading都十分的广泛，这是因为页面的加载时需要时间的，如果页面加载很快，loading的作用可能还不是特别能够体现，但是如果当页面加载速度不是很快甚至很慢的时候，页面就会出现白屏的状况，如果没有使用loading来和用户进行交互，用户并不知道应用到底是出现什么问题（卡死、出错或者在加载）那么就会十分的影响用户体验，页面加载所需要时间
页面加载时显示一个loading的图片或者动画或者提示信息
肖肖肖丽珠的博客
05-04 1万+
写在body的下面第一句 。文字：正在载入，请稍候…… 。图片                                                                   设置一下图片的样式，让他放在屏幕的中间。所有内容的上面 .loadingdiv {     position: relative;     margin-top: 1
js跳转新页面，指定div加载新页面
Vicco的博客
07-20 1万+
1、在当前页面上跳转新页面 window.open('#要载入的界面'); window.open('graphReportController.do?list&id=dzdxz'); window.open('webpage/com/nuist/singleStationInfo/stationInfoTab.jsp'); onclick="javascript:window.open('w
Flask中文手册：Python Web框架入门指南
"Python web框架.Flask中文手册.pdf" 是一本详细介绍如何使用Python的轻量级Web框架Flask进行Web开发的手册。手册涵盖了从安装、快速上手、教程到...通过学习，开发者能够熟练掌握使用Flask构建高效、灵活的Web应用。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值