Загрузка Gif останавливается в firefox

Я хочу, чтобы при обработке сервлета появлялось изображение загрузчика. Я делаю то, что перед обработкой формы я вызываю JSP, который содержит анимированный gif с загрузочным изображением. Из этого JSP я посылаю перенаправление сервлету, который обрабатывает форму. Это хорошо работает только в Chrome и Explorer, но в 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>
Я много чего пытался избежать, чтобы изображение перестало двигаться, но так и не нашел хорошего ответа. Если бы кто-нибудь мог помочь, я был бы рад. Это также не работает с iframes. Есть идеи?
4 3
servlets jsp animated-gif

4 ответа:

Я столкнулся с точно такой же проблемой ранее. И я исправил использование IFrames.

Сначала создайте 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>
1

Я уже решил свою проблему. Вместо этого я использовал 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;
}
1

Я столкнулся с точно такой же проблемой ранее. И я исправил использование функции setTimeout!

Конечно, ajax также может хорошо работать, но я использую $("#form").submit() вместо ajax, что означает, что submit синхронно с процессом загрузки gif-изображений. Я думаю, что эта проблема может быть связана с ошибкой процесса потока Firefox(только один подозреваемый). Мое решение выглядит следующим образом: 

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

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

Как и говорит код, пусть форма отправки не мешает процессу загрузки gif и тогда проблема решена!

Спасибо за внимание!

0

Я столкнулся с этой же проблемой и решил ее, используя вариацию ответа, данного @Zhl. Вместо того чтобы обернуть форму submit в вызов setTimeout, я обернул обновление пользовательского интерфейса для анимированного gif с помощью setTimeout. Это избавило меня от необходимости беспокоиться о деталях отправки формы, которые в моем случае требовались для вызова метода на стороне сервера (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 может иметь значение, этот пост SO стоит прочитать.

0