Question

我希望在处理servlet时出现加载gif图像。我所做的是在处理表单之前，我调用一个JSP，其中包含一个带有加载图像的动画gif。从这个JSP中，我将重定向发送到处理表单的servlet。这仅适用于Chrome和资源管理器，但在Firefox中图像停止移动。

我的表单的动作是一个包含加载图像的JSP，为了提交表单，我有以下代码：

var form = document.getElementById('reporteEstadisticoAnualArticulo');
var win = window.open("", "reporte","width=1002, height=700,location=0, menubar=0, scrollbars=1, status=1,resizable=0");
form.target = "reporte";
form.submit();

JSP包含以下代码：

    <html>
<head>
    <link type="text/css" href="css/Preloader.css" rel="stylesheet"  />
    <script type="text/javascript">
         function retraso(){
       var vars = getUrlVars();
       var location = document.getElementById("url").value;
           window.location = location+"?"+vars ;
           cargarImagen();
         }
         function cargarImagen() {
            document.getElementById("cargando").src = "images/Cargando.gif";
            return false;
         }
    </script>
</head>
<body onload="setTimeout('retraso()',500)">

    <div align="center" class="Preloader1">

        <label style="font-weight: bold; font-family: arial;">Cargando Reporte</label> <br /><br />
        <img id="cargando" alt="LogoNatura" src="images/Cargando.gif">
        <br /><br />
        <img alt="LogoNatura" src="images/logo.png">
    </div>
    <input type="hidden" value="<%= request.getParameter("url") %>" id="url" />
</body>
</html>

我已经尝试了很多东西以避免图像停止移动，但我还没有找到一个好的答案。如果有人可以提供帮助，我会很高兴。这也不适用于iframe。有什么想法吗？

Answer 1

我之前遇到过完全相同的问题。我使用IFrame修复了。

首先创建一个HTML文件并在那里插入图像（加载图标）。现在使用IFrame只需引用该文件。它也适用于Firefox。我做的是，如果它是IE浏览器，我只是直接用图像替换IFrame。

 <td id="tdImgLoad">
  <iframe style="height:50px;text-align:right;width:225px"  scrolling="no" frameborder="0" src="web/loading.htm" id="imgLoad"> </iframe>
 </td>


<script>
     if(isIE())
    {
         getElement ("tdImgLoad").innerHTML ="<img src='images/loading.gif'>";
    }
</script>

Answer 2

我已经解决了我的问题。我所做的是我使用了ajax而现在我的jsp看起来如下：

<html>
    <head>
        <link type="text/css" href="css/Preloader.css" rel="stylesheet"  />
        <script type="text/javascript" src="js/acciones.js"></script>
    </head>
    <body onload="retraso()">
        <div id ="reporte">
            <div align="center" class="Preloader1" id="loading">
                <label style="font-weight: bold; font-family: arial;">Cargando Reporte</label> <br /><br />
                <img id='cargando' alt='LogoNatura' src='images/Cargando.gif'>
                <br /><br />
                <img alt="LogoNatura" src="images/logo.png">
            </div>
            <input type="hidden" value="<%= request.getParameter("url") %>" id="url" />
        </div>
    </body>
</html>

我的javascript文件acciones.js包含以下函数：

function retraso(){
    var x = document.getElementById("reporte");
    var content = x.innerHTML;
    var vars = getUrlVars();
    var location = document.getElementById("url").value;
    var url = location+"?"+vars ;
    xmlhttp = GetXmlHttpObject();
    if (!xmlhttp) {
        alert ("Browser does not support HTTP Request");
        return;
    }
    var xml = xmlhttp;
    xmlhttp.onreadystatechange = function () {
        if (xml.readyState == 4) {
            x.innerHTML = xml.responseText;
        } else {
            x.innerHTML = content;
        }     
    };
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);

    return true;
}

Answer 3

我之前遇到过完全相同的问题。我修复了使用setTimeout函数！

当然，ajax也可以运行良好，但我使用的是$（＆＃34;＃form＆＃34;）。submit（）而不是ajax，这意味着submit与gif图像加载过程同步。我认为这个问题可能是由于Firefox的线程进程错误（只有一个嫌疑人）。我的解决方案类似于以下代码：

   $.blockUI({ message: $("#loading").html() });

   setTimeout(function(){
        $("#form").submit();
   },1);

就像代码告诉的那样，让表单提交不会干扰gif加载过程，然后问题就解决了！

感谢您的关注！

Answer 4

我遇到了同样的问题，并使用@Zhl给出的答案的变体来解决。我没有将表单提交包装在setTimeout调用中，而是使用setTimeout包装了动画gif的UI更新。这使我不必担心表单提交详细信息，就我而言，该细节需要调用服务器端方法（ASP.NET）。

<form id="myForm">
    <button onclick="myPreSubmitFunction()">Do Stuff</button>
    <img id="loading" />
</form>

<script>
function myPreSubmitFunction() {
    setTimeout(function () {
        //do UI update here which adds gif
        document.getElementById("loading").src = "loading.gif";
    }, 0);

    //submit to come after the UI update
}
</script>

这可防止gif动画因在Firefox中提交的表单动作而停止。关于通过setTimeout运行一行代码可能会有所不同，this SO post is a worthwhile read。

GIF加载在Firefox中停止

4 个答案: