資料消極式載入，消極式載入

最後更新：2015-03-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

資料消極式載入，消極式載入

我們在上網的時候經常會看到這樣的效果,在我們發送請求之後,資料顯示在瀏覽器之前,會有一個圓圈在不斷地轉

今天比較好奇,就找了找資料研究了一下

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的內容

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

資料消極式載入，消極式載入

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support