Gif loading stops in firefox

Question

I want a loading gif image to appear while processing a servlet. What I do is that before processing the form, I call a JSP which contains an animated gif with a loading image. From this JSP, I send a redirect to the servlet which processes the form. This only works well in Chrome and in Explorer, but in Firefox the image stops moving.

The action of my form is a JSP which contains the loading image and for submiting the form I have the following code:

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();

The JSP contains the following code:

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

I've tried a lot of things to avoid the image to stop moving, but I haven't found a good answer. If anyone could help, I would be pleased. This doesn't work with iframes either. Any ideas?

AjayR · Answer 1 · 2011-12-07T01:04:56.723

1

I faced exactly the same issue earlier. And I fixed using IFrames.

First create a HTML file and insert the image there (loading icon). Now using IFrame just refer that file. It works fine in Firefox too. What I did is, if it IE browser, I just replaced the IFrame with image directly.

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

edited Dec 07 '11 at 01:04

answered Dec 07 '11 at 00:43

AjayR

4,169
4
44
78

Thank you very much for your answer. I just have a question, I've never used iframes before, and I realized your image in the iframe has a .ssi extension. How can I convert my gif image into that format? – user1084509 Dec 07 '11 at 00:58
I edited my code, You need not to use .ssi, you simply create a HTML file, say loading.htm, and refer that. Please see my edited code – AjayR Dec 07 '11 at 01:05
1

I already tried what you told me, but the image is still stopping when the url is called. How do you call the servlet? I do it by the following javascript instruction: window.location = location+"?"+vars ;, where location is the name of the servlet. – user1084509 Dec 07 '11 at 16:14

score 1 · Accepted Answer · answered Dec 09 '11 at 15:43

I already solved my problem. What I did is that I used ajax instead and now my jsp looks as follows:

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

An my javascript file acciones.js contains the following function:

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;
}

score 0 · Answer 3 · answered Mar 29 '18 at 05:06

I faced exactly the same issue earlier. And I fixed using setTimeout function!

Of course, ajax could also works well, but what I use is $("#form").submit() instead of ajax, which means that submit is synchronous with the gif image loading process. I think this problem may be due to Firefox's thread process bug(just one suspect). My solution is like the following code:

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

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

Just like the code tells, let form's submit do not interfere with gif loading process and then problem solved!

Thanks for your attention!

score 0 · Answer 4 · answered Jul 20 '18 at 15:13

I ran into this same issue and solved it by using a variation of the answer given by @Zhl. Instead of wrapping the form submit in a setTimeout call, I wrapped the UI update for the animated gif with a setTimeout. This saved me having to worry about the form submit details which in my case needed to call a server side method (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>

This prevents the gif animation being stopped by the action of the form being submitted in Firefox. As to how running a line of code via setTimeout might make a difference, this SO post is a worthwhile read.

Gif loading stops in firefox

4 Answers4