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代碼。
