0
点赞
收藏
分享

微信扫一扫

数据延迟加载


我们在上网的时候经常会看到这样的效果,在我们发送请求之后,数据显示在浏览器之前,会有一个圆圈在不断地转

数据延迟加载_延迟

今天比较好奇,就找了找资料研究了一下

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" οnsubmit="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如下

数据延迟加载_等待_02

至于asdf.png是我随便找的一张图,lazyLoad.jsp的效果如下:

数据延迟加载_html_03

至于提交的请求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秒之内

数据延迟加载_html_04

5秒之后,就会显示return.jsp的内容




举报

相关推荐

0 条评论