本文共 1849 字,大约阅读时间需要 6 分钟。
from : http://brofe.javaeye.com/blog/220784
在Java Web应用中, 当加载一个动态页面时及JSP页面时,如果页面动态数据较多,会有很长一段时间的空白页面,古加上这个页面正在加载的提示,使得应用更加人性化。
- processbar.jsp
-
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>process bar</title>
- <script type="text/javascript" language="JavaScript">
-
-
- document.onreadystatechange = function () {
- if(document.readyState=="complete") {
- document.getElementById('divprogressbar').style.display='none';
- }
- }
-
- </script>
- </head>
- <body>
- <div id="divprogressbar"
- style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-color: #ffffff; filter: alpha ( opacity = 100 ); z-index: 50000">
- <div style="text-align: center; padding-top: 200px">
- <table align="center" border="1" width="37%" cellspacing="0"
- cellpadding="4" style="border-collapse: collapse" bgcolor="#FFFFEC"
- height="87">
- <tr>
- <td bgcolor="#3399FF" style="font-size: 12px;" height="24"
- align="center">
- 友情提示, 数据正在载入中...
- </td>
- </tr>
- <tr>
- <td style="font-size: 12px; line-height: 200%" align="center">
- 网页正在载入数据中.请耐心等待...
- <marquee style="border: 1px solid #000000" direction="right"
- width="300" scrollamount="5" scrolldelay="10" bgcolor="#ECF2FF">
- <table cellspacing="1" cellpadding="0">
- <tr height=8>
- <td bgcolor=#3399FF width=8></td>
- <td></td>
- <td bgcolor=#3399FF width=8></td>
- <td></td>
- <td bgcolor=#3399FF width=8></td>
- <td></td>
- <td bgcolor=#3399FF width=8></td>
- <td></td>
- </tr>
- </table>
- </marquee>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </body>
- </html>
-
- 然后在另外需要使用的页面中加入如下代码即可:
-
- <jsp:include page="processbar.jsp"></jsp:include>
-
- 注意哦, 只有当页面加载真的需要花费时间的时候才会看到效果。
描述: 一个简单的HTML测试页面。为了便于效果的演示,该页面中的加载提示永远不会消失,可以修改一下页面中的JS代码。
转载地址:http://tcqbi.baihongyu.com/