Gif loading stops in firefox

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?

Solution

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