数据延迟加载

最新推荐文章于 2025-04-24 17:31:40 发布

程序员小董

最新推荐文章于 2025-04-24 17:31:40 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签：用户友好延迟加载等待

本文链接：https://blog.youkuaiyun.com/dlf123321/article/details/44600381

版权

前端专栏收录该内容

18 篇文章

订阅专栏

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

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

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如下

至于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秒之内