数据延迟加载
我们在上网的时候经常会看到这样的效果,在我们发送请求之后,数据显示在浏览器之前,会有一个圆圈在不断地转
今天比较好奇,就找了找资料研究了一下
lazyLoad.jsp
<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function check(frm){
var m = document.getElementById("mFrame");
m.contentWindow.document.getElementById("div_loading").style.display = 'block';
m.contentWindow.document.getElementById("div_main").style.display = 'none';
return true;
}
</script>
</head>
<body>
<div align="center">
<s:form action="searchFile" method="post" target="mFrame"
theme="simple" onsubmit="return check(this)">
<table class="tab_frm" width="100%">
<tr>
<td colspan="5" align="center"><s:submit value="查询"
cssClass="btn_normal" theme="simple" /> <s:reset value="重置"
theme="simple" cssClass="btn_normal" /></td>
</tr>
</table>
</s:form>
</div>
<iframe id="mFrame" name="mFrame" src="common/blank.html" frameborder="0" scrolling="auto" width="100%" height="100%" >
</iframe>
</body>
</html>mFrame的数据源来自blank.html
其代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div align="center" id="div_loading"
style=" display: none;">
<img src="../images/loading32.gif" />
<br />
<br />
<span style="font-size:15px;font-weight:normal;">数据读取中，请稍后...</span>
</div>
<div align="center" id="div_main" style="display: block;">
<img src="../images/asdf.png" />
</div>
</body>
</html>loading32.gif如下
至于asdf.png是我随便找的一张图,lazyLoad.jsp的效果如下:
至于提交的请求searchFile,是一个struts的action
struts.xml如下
<action name="searchFile" class="cdm.module.file.action.SearchFileAction" method="lazyLoad"> <result>/return.jsp</result> </action>对应的出来函数:
public String lazyLoad(){
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return SUCCESS;
}返回的return.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=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
你看见我了吗?
</body>
</html>
最后的效果
点击查询5秒之内
5秒之后,就会显示return.jsp的内容