当网页提交时，如果提交内容较多时或者服务器响应较慢时容易有一段延迟，此事若是采用等待页面可加强用户使用感觉，具体实现如下：
网页内容：
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/tld/struts-tiles.tld" prefix="tiles"%>
<style type="text/css">
<!--
/*弹出层的STYLE*/
.popupLoadingDiv {
border: 1px solid #336699;
background:#ffffff url(web/img/content_top_bg.gif) repeat-x 0px -20px;
padding:5px;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index:99;
width: 300px;
height: 120px;
left:50%;/*FF IE7*/
top: 50%;/*FF IE7*/
margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/
margin-top:0px;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/
_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
.grayBackground {
background-color: #ccc;
width: 150%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/
_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
#loadingDivTitleDiv{
font-size:14px;
font-weight:bold;
color:#000000;
text-align:center;
border-bottom:1px dashed #336699;
}
#loadingDivImgDiv{
padding-top:5px;
padding-bottom:5px;
}
#loadingDivInstructionDiv{
font-size:12px;
font-weight:normal;
color:#000000;
text-align:center;
}
/*The END*/
-->
</style>
<div id="loadingDiv" class="popupLoadingDiv" style="display:none">
<div id="loadingDivTitleDiv">提交中</div>
<div id="loadingDivImgDiv">
<img id="loadingImg" src="web/page/common/loading/loading.gif" border="0"/>
</div>
<div id="loadingDivInstructionDiv">正在提交，请稍候
</div>
</div>
<div id="grayBackgroundDiv" class="grayBackground" style="display:none;">
<!-- 用来保持在选择框上的IFrame -->
<iframe id="innerFrame" style="position:absolute;z-index:-1;width:100%;height:100%;top:0;left:0;scrolling:no;" frameborder="0" src="about:blank">
</iframe>
</div>
<script language="javascript">
<!--
/*****************************************************
* 显示载入中div
* 何杨 2011年7月25日11:43:54
*****************************************************/
function showLoadingWnd(){
document.getElementById("loadingDiv").style.display="block";
document.getElementById("grayBackgroundDiv").style.display="block";
window.setTimeout('replayImg()', 3000);
}
/*****************************************************
* 重新加载图片
* 何杨 2011-7-25 11:43:34
*****************************************************/
function replayImg(){
var loadingImg = document.getElementById("loadingImg");
loadingImg.src=loadingImg.src;
}
//-->
</script> 在页面上如下载入上述页面：
<jsp:include page="/web/page/common/loading/loading.jsp" flush="true" />
需要弹出此窗口时使用如下JS函数：
showLoadingWnd()
代码从这里下载：
http://www.blogjava.net/Files/heyang/loading2011-09-09.rar实现效果如图：
