页面提交时，提示“正在加载”背景变灰，当数据加载完成时，提示消失！

点击左边菜单请求一个action后，右边的页面提示“数据正在加载，请稍后...”同时页面背景变成灰色，当数据完成之后，提示消失，页面颜色变回正常。请问这种功能如何实现，或者谁有着方面的例子，参考一下！  谢谢了！

解决方案 »

  1.   


                    response.setHeader("refresh", "3;url='XXX.jsp'");
    response.setContentType("text/html;charset=GB2312");
    response.getWriter().write("数据正在加载，请稍后...");
    可以这样试试。
      

  2.   


    问题是当在左边菜单请求了action之后  这是才去action中加载数据，等加载数据完成，才能显示该页面，我是想要    当点击了菜单请求后，右边页面出现这样的提示，等数据加载完成之后，提示消失！
      

  3.   

    那你加个div就行了，用js控制显示就可以了。
      

  4.   

    其实不怎么推荐这种做法，让用户觉得加载时间更久。Anyway，常用套路是：
    <body onload="document.getElementById('main').style.visibility='visible';">
        <div id="loading">正在加载中....</div>
        <div id="main" style="visibility:hidden;">
             页面的所有内容均放在这里！
        </div>
    </body>
      

  5.   

    楼主可以在请求action后的页面上,onload的时候就去执行弹出框。提示正在加载数据。加载数据可以使用ajax。
    所以你action中在跳转的时候不要有取数据的操作，只要直接跳转到页面的操作就可以了。这样页面先出来了，数据在页面出来的时候再用ajax加载不就可以了。
      

  6.   

    <%@ page contentType="text/html;charset=UTF-8"%>
    <div id="loading">
    <div class="loading-indicator">页面正在加载中...</div>
    </div>
    <script type="text/javascript">
    //判断页面是否加载完毕，如果加载完毕，就删除加载信息的DIV

    $("#quering").hide();

      document.onreadystatechange = function() {
    try {

    if (document.readyState.toLowerCase() == "complete") {
    document.getElementById("loading").style.display = "none";
    }
    } catch (e) {
    alert("页面加载失败");
    }
    };
      

  7.   


    ++ 1、jquery.blockUI.js
       2、jquery.jBox-2.3.min.js
      以上两个都可以实现的。
      

  8.   


    我把代码补完试了下没问题啊：
    <html>
    <head>
    <script>
    function doReady() {
        document.getElementById('loading').style.display='none';
        document.getElementById('loading').style.visibility='none';
        document.getElementById('main').style.visibility='visible';
    }
    </script>
    </head>
    <body onload="doReady();">
        <div id="loading">正在加载中....</div>
        <div id="main" style="visibility:hidden;">
             页面的所有内容均放在这里！
        </div>
    </body>
    </html>
      

  9.   


    那提交需要用ajax提交，等服务器有返回值了，再将显示恢复成正常。