Gif laden stopt in firefox

Ik wil een laad-GIF-afbeelding verschijnen tijdens het verwerken van een servlet. Wat ik doe is dat voordat ik het formulier verwerk, ik een JSP noem die een geanimeerd GIF met een laadafbeelding bevat. Vanuit dit JSP stuur ik een omleiding naar de servlet die het formulier verwerkt. Dit werkt alleen goed in Chrome en in Verkenner, maar in Firefox houdt de afbeelding op met bewegen.

De actie van mijn formulier is een JSP die de afbeelding bevat en voor het verzenden van het formulier heb ik de volgende 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();

De JSP bevat de volgende 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">

         

LogoNatura

LogoNatura </div> <input type="hidden" value="<%= request.getParameter("url") %>" id="url" /> </body> </html>

Ik heb veel dingen geprobeerd om te voorkomen dat het beeld zou stoppen met bewegen, maar ik heb geen goed antwoord gevonden. Als iemand zou kunnen helpen, zou ik tevreden zijn. Dit werkt ook niet met iframes. Om het even welke ideeën?

3

4 antwoord

Ik kreeg eerder precies hetzelfde probleem. En ik repareerde IFrames.

Maak eerst een HTML-bestand en voeg daar de afbeelding in (pictogram laden). Gebruik nu IFrame alleen dat bestand. Het werkt ook goed in Firefox. Wat ik deed is, als het IE-browser is, heb ik het IFrame zojuist vervangen door een afbeelding.

 <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 ="";
    }
</script>
1
toegevoegd
Ik heb mijn code bewerkt, je hoeft .ssi niet te gebruiken, je maakt eenvoudig een HTML-bestand, zegt loading.htm, en verwijst daarnaar. Zie mijn bewerkte code
toegevoegd de auteur AjayR, de bron
Hartelijk dank voor uw antwoord. Ik heb alleen een vraag, ik heb nog nooit eerder iframes gebruikt en ik besefte dat je afbeelding in het iframe een .ssi-extensie heeft. Hoe kan ik mijn GIF-afbeelding in die indeling converteren?
toegevoegd de auteur user1084509, de bron
Ik heb al geprobeerd wat je me hebt verteld, maar het beeld stopt nog steeds wanneer de URL wordt gebeld. Hoe noem je de servlet? Ik doe het met de volgende javascript-instructie: window.location = location + "?" + Vars;, waarbij location de naam van de servlet is.
toegevoegd de auteur user1084509, de bron

Ik heb mijn probleem al opgelost. Wat ik deed is dat ik in plaats daarvan ajax gebruikte en nu ziet mijn jsp er als volgt uit:

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

LogoNatura

LogoNatura </div> <input type="hidden" value="<%= request.getParameter("url") %>" id="url" /> </div> </body> </html>

Een mijn javascript-bestand acciones.js bevat de volgende functie:

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
toegevoegd

Ik kreeg eerder precies hetzelfde probleem. En ik repareerde de setTimeout-functie!

Natuurlijk kan ajax ook goed werken, maar wat ik gebruik is $ ("# formulier"). Submit() in plaats van ajax, wat betekent dat indienen synchroon loopt met het laden van het GIF-beeld. Ik denk dat dit probleem te wijten kan zijn aan Firefox's thread process bug (slechts één verdachte). Mijn oplossing is als de volgende code:

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

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

Net zoals de code vertelt, laat form's submit niet interfereren met het laden van gif en dan is het probleem opgelost!

Bedankt voor uw aandacht!

0
toegevoegd

Ik kwam ditzelfde probleem tegen en loste het op door een variatie op het antwoord van @Zhl te gebruiken. In plaats van het formulier in te leveren in een setTimeout-aanroep, heb ik de UI-update voor het geanimeerde GIF ingepakt met een setTimeout. Hierdoor kon ik me geen zorgen meer maken over de details van het formulier, die in mijn geval een server side-methode (ASP.NET) moesten gebruiken.

<form id="myForm">
    <button onclick="myPreSubmitFunction()">Do Stuff</button>
    
</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>

Dit voorkomt dat de GIF-animatie wordt gestopt door de actie van het formulier dat wordt ingediend in Firefox. Met betrekking tot de manier waarop het uitvoeren van een coderegel via setTimeout een verschil kan maken, deze SO-post is een de moeite waard om te lezen .

0
toegevoegd