Zatrzymywanie animacji GIF w IE

Czy ktoś wie, jak obejść się, aby animowane pliki GIF były nadal animowane po kliknięciu łącza lub przesłaniu formularza na stronie, na której się znajdujesz w IE? Działa to dobrze w innych przeglądarkach.

Dzięki.

Przyjęte rozwiązanie nie zadziałało dla mnie.

Po kilku dalszych badaniach natknąłem się na to obejście i faktycznie działa.

Oto sedno tego:

function showProgress() {
    var pb = document.getElementById("progressBar");
    pb.innerHTML = '<img src="./progress-bar.gif" width="200" height ="40"/>';
    pb.style.display = '';
}

aw Twoim html:

<input type="submit" value="Submit" onclick="showProgress()" />
<div id="progressBar" style="display: none;">
    <img src="./progress-bar.gif" width="200" height ="40"/>
</div>

Więc kiedy formularz jest przesyłany, <img/>tag jest wstawiany iz jakiegoś powodu nie ma na to wpływu np. Problemy z animacją.

Przetestowano w Firefoksie, ie6, ie7 i ie8.

stare pytanie, ale publikuję je dla innych pracowników Google:

Spin.js DZIAŁA w tym przypadku użycia: http://fgnass.github.com/spin.js/

IE zakłada, że ​​kliknięcie linku zwiastuje nową nawigację, w której zostanie zastąpiona obecna zawartość strony. W ramach tego procesu zatrzymuje kod, który animuje GIF-y. Wątpię, czy jest coś, co możesz z tym zrobić (chyba że faktycznie nie nawigujesz, w takim przypadku użyj funkcji return false w zdarzeniu onclick).

Oto jsFiddle, który działa dobrze podczas przesyłania formularza z method = "post". Spinner jest dodawany podczas przesyłania formularza.

$("form").bind("submit", onFormSubmit);

function onFormSubmit() {
    setTimeout(showSpinner, 1);
}

function showSpinner() {
    $("body").append($('<img id="spinner" src="spinner.gif" alt="Spinner" />'));
}

Zobacz kod jsFiddle tutaj

Przetestuj w swojej przeglądarce IE tutaj

Natknąłem się na ten post i chociaż już otrzymałem odpowiedź, czułem, że powinienem opublikować informacje, które pomogły mi w rozwiązaniu tego problemu specyficznego dla IE 10 i mogą pomóc innym, którzy dotarli do tego posta z podobnym problemem.

Byłem zaskoczony tym, że animowane gify po prostu nie wyświetlały się w IE 10, a potem znalazłem ten klejnot.

Tools→ Internet Options→ Advanced→ MultiMedia→Play animations in webpages

mam nadzieję że to pomoże.

Napotkałem ten problem, gdy próbowałem wyświetlić ładujący się gif podczas przetwarzania przesłania formularza. Dodatkową frajdą było to, że to samo przesłanie wymagało uruchomienia walidatora, aby upewnić się, że formularz jest poprawny. Jak wszyscy inni (na każdym poście formularza IE / gif w Internecie) nie mogłem zmusić spinnera ładowania do "zakręcenia" w IE (i, w moim przypadku, zweryfikowania / przesłania formularza). Przeglądając porady na http://www.west-wind.com znalazłem post przez ev13wt, który sugerował, że problem to „... że IE nie renderuje obrazu jako animowanego, ponieważ był niewidoczny podczas renderowania. " To miało sens. Jego rozwiązanie:

Pozostaw puste miejsce, w którym miałby się znaleźć gif i użyj JavaScript, aby ustawić źródło w funkcji onsubmit - document.getElementById ('loadingGif'). Src = "ścieżka do pliku gif".

Oto jak to zaimplementowałem:

<script type="text/javascript">
    function validateForm(form) {

        if (isNotEmptyid(form.A)) {
            if (isLen4(form.B)) {        
                if (isNotEmptydt(form.C)) {
                    if (isNumber(form.D)) {        
                        if (isLen6(form.E)){
                            if (isNotEmptynum(form.F)) {
                                if (isLen5(form.G)){
                                    document.getElementById('tabs').style.display = "none";                
                                    document.getElementById('dvloader').style.display = "block";                
                                    document.getElementById('loadingGif').src = "/images/ajax-loader.gif"; 
                                    return true;
                                }
                            }
                        }
                    }
                }
            }
        }
        return false;   
    }               
</script>

<form name="payo" action="process" method="post" onsubmit="return validateForm(this)">
    <!-- FORM INPUTS... -->
    <input type="submit" name="submit" value=" Authorize ">

    <div style="display:none" id="dvloader">  
        <img id="loadingGif" src="" alt="Animated Image that appears during processing of document." />
        Working... this process may take several minutes.
    </div>

</form>

To działało dobrze we wszystkich przeglądarkach!

Oto co zrobiłem. Wszystko, co musisz zrobić, to podzielić GIF, aby powiedzieć 10 obrazów (w tym przypadku zacząłem 01.gifi skończyłem na 10.gif) i określić katalog, w którym je przechowujesz.

HTML:

<div id="tester"></div>

JavaScript:

function pad2(number) {   
    return (number < 10 ? '0' : '') + number 
}
var 
    dirURL = 'path/to/your/images/folder',
    ajaxLoader = document.createElement('img');
ajaxLoader.className = 'ajax-image-loader';
jQuery(document).ready(function(){
    jQuery('#tester').append(ajaxLoader);
    set(0);
});
function set(i) {
    if (i > 10) i = 1;    
    img.src = dirURL + pad2(i) + '.gif';
    setTimeout(function() {
        set(++i);
    }, 100);    
}

Ta metoda działa z IE7, IE8 i IE9 (chociaż dla IE9 można by użyć spin.js). UWAGA: Nie testowałem tego w IE6, ponieważ nie mam maszyny z przeglądarką z lat 60., chociaż metoda jest tak prosta, że ​​prawdopodobnie działa nawet w IE6 i niższych.

W związku z tym musiałem znaleźć poprawkę, w której animowane gify były używane jako obraz tła, aby zapewnić, że stylizacja zostanie zachowana w arkuszu stylów. Tam też u mnie zadziałała podobna poprawka ... mój skrypt poszedł mniej więcej tak (używam jQuery, żeby ułatwić sobie wyliczony styl tła - jak to zrobić bez jQuery to temat na inny post):

var spinner = <give me a spinner element>

window.onbeforeunload = function() {
  bg_image = $(spinner).css('background-image');
  spinner.style.backgroundImage = 'none';
  spinner.style.backgroundImage = bg_image;
}

[EDYTUJ] Po nieco dalszych testach właśnie zdałem sobie sprawę, że to nie działa z obrazami tła w IE8. Próbowałem wszystkiego, co przychodziło mi do głowy, aby IE8 renderował animację gif podczas ładowania strony, ale w tej chwili nie wygląda to na możliwe.

Opierając się na odpowiedzi @danfolkes, działało to dla mnie w IE 8 i ASP.NET MVC3.

W naszym _Layout.cshtml

<body style="min-width: 800px">
    <div id="progress">
        <div style="min-height: 200px">
        </div>
        <div id="throbber">
            <img src="..\..\Content\ajax-loader.gif" alt="Progress" style="display: block;
                margin-left: auto; margin-right: auto" />
        </div>
    </div>
    <div id="main">

<<< treść tutaj >>> ...

<script type="text/javascript" language="javascript">
    function ShowThrobber() {
        $('#main').hide();
        $('#progress').show();
        // Work around IE bug which freezes gifs
        if (navigator.appName == 'Microsoft Internet Explorer') {
            // Work around IE bug which freezes gifs
            $("#throbber").html('<img src="../../Content/ajax-loader.gif" alt="Progress" style="display: block; margin-left: auto; margin-right: auto"/>');
         }
</script>
<script type="text/javascript" language="javascript">
    function HideThrobber() {
        $('#main').show();
        $('#progress').hide();
    }
</script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        HideThrobber();
    });
</script>

A w naszych linkach nawigacyjnych:

<input type="submit" value="Finish" class="submit-link" onclick="ShowThrobber()"/>

lub

@Html.ActionLink("DoSometthing", "MyController", new { Model.SomeProperty }, new { onclick = "ShowThrobber()" })

Znalazłem to rozwiązanie na http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html i DZIAŁA! Po prostu ponownie załaduj obraz przed ustawieniem go jako widoczny. Wywołaj następującą funkcję Javascript z przycisku onclick:

function showLoader()
{
   //*** Reload the image for IE ***
   document.getElementById('loader').src='./images/loader.gif';
   //*** Let's make the image visible ***
   document.getElementById('loader').style.visibility = 'visible';
}

Zdaję sobie sprawę, że to stare pytanie i że do tej pory każdy z oryginalnych plakatów znalazł rozwiązanie, które działa dla nich, ale natknąłem się na ten problem i stwierdziłem, że tagi VML nie padają ofiarą tego błędu IE. Animowane GIF-y nadal poruszają się podczas wyładowywania strony po umieszczeniu w przeglądarce IE przy użyciu tagów VML.

Zauważ, że wykryłem VML przed podjęciem decyzji o użyciu znaczników VML, więc działa to w FireFox i innych przeglądarkach, które używają normalnego zachowania animowanego GIF-a.

Oto jak to rozwiązałem.

<input class="myExitButton" type="button" value="Click me"  />

<div class="loadingNextPage" style="display:none" >
    <span style="left:-24px; POSITION: relative; WIDTH: 48px; DISPLAY: inline-block; HEIGHT: 48px" class="spinnerImageVml"><?xml:namespace prefix="rvml" ns = "urn:schemas-microsoft-com:vml" /><rvml:group style="POSITION: absolute; WIDTH: 48px; HEIGHT: 48px; rotation: 1deg" class="rvml" coordsize = "47,47"><rvml:image style="POSITION: absolute; WIDTH: 48px; HEIGHT: 48px; TOP: 0px; LEFT: 0px" class="rvml" src="/images/loading_gray.gif" coordsize="21600,21600"></rvml:image></rvml:group></span>
    <img class="spinnerImage" src="/images/loading_gray.gif" alt="loading..." />
    <div>Just one moment while we access this information...</div>
</div>

<script language="javascript" type="text/javascript">
    window.LoadProgress = (function (progress, $) {

        var getdialogHeight = function (height) {
            var isIE = navigator.userAgent.toLowerCase().indexOf('msie') > -1;
            if (isIE) {
                return height + 'px';
            }
            return height;
        };

        var isVmlSupported = function () {
            var a = document.body.appendChild(document.createElement('div'));
            a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
            var b = a.firstChild;
            b.style.behavior = "url(#default#VML)";
            var supported = b ? typeof b.adj == "object" : true;
            a.parentNode.removeChild(a);
            return supported;
        };

        var showAnimationDuringPageUnload = function () {
            if (isVmlSupported()) {
                $(".loadingNextPage > .spinnerImage").hide();
            }
            else {
                $(".loadingNextPage > .spinnerImageVml").hide();
            }
        };

        var openLoadingMessage = function () {
            $(".loadingNextPage").dialog({
                modal: true,
                closeOnEscape: true,
                title: 'Please wait...',
                closeText: 'x',
                height: getdialogHeight(200),
                buttons: {
                    "Close": function () {
                        $(this).dialog("close");
                    }
                }
            });
        };

        $('.myExitButton').click(function () {
            openLoadingMessage();
            showAnimationDuringPageUnload();
            window.location.href = 'http://www.stackoverflow.com';
        });


        return progress;
    })(window.LoadProgress || {}, window.jQuery);
</script>

Oczywiście opiera się to na jQuery, jQueryUI i wymaga pewnego typu animowanego pliku GIF („/images/loading_gray.gif”).

JQuery:

$("#WhereYouWantTheImageToAppear").html('<img src="./Animated.gif" />');

Właśnie miałem podobny problem. Te działały idealnie dla mnie.

$('#myElement').prepend('<img src="/path/to/img.gif" alt="My Gif" title="Loading" />');

$('<img src="/path/to/img.gif" alt="My Gif" title="Loading" />').prependTo('#myElement');

Innym pomysłem było użycie .load () jQuery; aby załadować, a następnie dołączyć obraz.

Działa w IE 7+

Bardzo, bardzo późno, aby odpowiedzieć na to pytanie, ale właśnie odkryłem, że użycie obrazu tła, który jest zakodowany jako identyfikator URI base64 w CSS, zamiast przechowywanego jako oddzielny obraz, nadal animuje się w IE8.

Bardzo prostym sposobem jest użycie wtyczki jQuery i SimpleModal . Następnie, gdy muszę pokazać mój „ładujący się” gif podczas przesyłania, robię:

$('*').css('cursor','wait');
$.modal("<table style='white-space: nowrap'><tr><td style='white-space: nowrap'><b>Please wait...</b></td><td><img alt='Please wait' src='loader.gif' /></td></tr></table>", {escClose:false} );

Miałem ten sam problem, wspólny także dla innych przeglądarek, takich jak Firefox. W końcu odkryłem, że dynamiczne tworzenie elementu z animowanym gifem w formularzu nie jest animowane, więc opracowałem następujący element roboczy.

1) W document.ready()każdym FORMULARZU znajdującym się na stronie otrzymujemy position:relativewłasność, a następnie do każdego dołączana jest niewidocznaDIV.bg-overlay .

2) Następnie, zakładając, że każda przesłana wartość mojej witryny jest identyfikowana przez btn-primaryklasę css, ponownie na document.ready(), szukam tych przycisków, przechodzę do rodzica FORMU każdego z nich i przy wysyłaniu formularza uruchamiam showOverlayOnFormExecution(this,true);funkcję, mijając kliknięty przycisk i wartość logiczna, która przełącza widoczność DIV.bg-overlay.

$(document).ready(function() {

  //Append LOADING image to all forms
  $('form').css('position','relative').append('<div class="bg-overlay" style="display:none;"><img src="/images/loading.gif"></div>');

  //At form submit, fires a specific function
  $('form .btn-primary').closest('form').submit(function (e) {
    showOverlayOnFormExecution(this,true);
  });
});

CSS dla DIV.bg-overlayjest następujący:

.bg-overlay
{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:rgba(255,255,255,0.6);
  z-index:100;
}

.bg-overlay img
{
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-40px; //my loading images is 80x80 px. This is done to center it horizontally and vertically.
  margin-top:-40px;
  max-width:auto;
  max-height:80px;
}

3) Przy każdym przesłaniu formularza uruchamiana jest następująca funkcja, aby pokazać pół-białe tło na całej powierzchni (co uniemożliwia ponowne interakcję z formularzem) i animowany gif wewnątrz niego (który wizualnie pokazuje akcję ładowania).

function showOverlayOnFormExecution(clicked_button, showOrNot) 
{
    if(showOrNot == 1)
    {
        //Add "content" of #bg-overlay_container (copying it) to the confrm that contains clicked button 
        $(clicked_button).closest('form').find('.bg-overlay').show();
    }
    else
        $('form .bg-overlay').hide();
}

Pokazywanie animowanego gifa przy wysyłaniu formularza, zamiast dołączania go w tym zdarzeniu, rozwiązuje problem "zamrożenia animacji gif" w różnych przeglądarkach (jak powiedziałem, znalazłem ten problem w IE i Firefox, a nie w Chrome)