Загрузка GIF останавливается в Firefox - PullRequest
Новая
       4

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

3 голосов
/ 07 декабря 2011

Я хочу, чтобы при загрузке сервлета отображалось изображение загрузки GIF.Что я делаю, так это то, что перед обработкой формы я вызываю 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>

Я много чего пытался избежать, чтобы изображение перестало двигаться, но я не нашел хорошего ответа.Если бы кто-нибудь мог помочь, я был бы рад.Это не работает и с фреймами.Есть идеи?

Ответы [ 4 ]

1 голос
/ 09 декабря 2011

Я уже решил свою проблему.Я использовал вместо этого 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 голос
/ 07 декабря 2011

Раньше я сталкивался с точно такой же проблемой.И я исправил с помощью 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>
0 голосов
/ 20 июля 2018

Я столкнулся с той же проблемой и решил ее, используя вариант ответа @Zhl.Вместо того, чтобы оборачивать отправку формы в вызове 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 голосов
/ 29 марта 2018

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

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

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

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

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

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

...