Zatrzymywanie animacji GIF w IE

109

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.

mattt
źródło
3
Jedyną właściwą odpowiedzią tutaj jest @AnthonyWJones. W przypadku postów POST, rzeczywiste przesłania (nie ajax) nic nie działa.
P.Brian. Mackey
Właściwie to wcale nie jest prawda. Użycie limitu czasu do wyświetlenia obrazu w zdarzeniu onsubmit działa dobrze z formularzem POST.
oldwizard
@ P.Brian.Mackey - rozwiązanie autorstwa j.davis zadziałało dla mnie nawet na żądanie poczty. Jednak używamy również zestawu narzędzi ajaxcontrol, aby wywołać metodę po stronie serwera. W takim przypadku to nie działa.
Ankur-m,
Sprawdź odpowiedź Jourdana tutaj . Myślę, że jest to lepsze rozwiązanie i działa również na niższym poziomie IE.
Jason Kresowaty

Odpowiedzi:

99

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.

j.davies
źródło
8
W swoim kodzie nigdy nie wykonujesz POST. Tylko wywołanie javascript „onclick =”. Wypróbowałem to z POST, jak można się spodziewać po kliknięciu przycisku Prześlij i nie działa.
P.Brian. Mackey
O ile na koniec onclick nie zwrócisz wartości false, przycisk przesyłania uruchomi POST. Tak właśnie działają przyciski przesyłania.
Frug
2
-1 Ta odpowiedź też jest ZŁA. Nie działa w IE7 i IE8. Obraz gif FREZEES po przesłaniu formularza.
Marco Demaio
2
To zadziałało dla mnie przy użyciu jQuery. Muszę przyznać, że włamanie jest dość dziwne. Tak to działało w moim przykładzie: code<div id = "img_content"> <img id = 'aj_loader' src = 'asset / 2631.gif' style = "display: none;" /> </div> A potem: code$ ("# img_content"). html ($ ("# img_content"). html ());
misaizdaleka
35

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/

Entendu
źródło
Korekta, działa, ale przestaje animować tuż przed załadowaniem strony. Więc jeśli jest to krótkie ładowanie, wygląda na to, że animacja zawiesza się jak w oryginalnym numerze.
James McMahon
Świetne rozwiązanie, działa dobrze w ie11, więc nadal wydaje się być aktualne i obsługiwane.
Adam Knights
spin.js niestety mocno obciąża procesor. Zobacz problemy / 8 , problemy / 200 , problemy / 215
user247702
Spin.js nie działa dla mnie na iPhonie. Zawiesza się również, gdy tylko strona zostanie przekierowana na inną.
Ankur-m
18

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).

AnthonyWJones
źródło
+1 - wypróbowałem obie najlepsze odpowiedzi. Ani jedno, ani drugie nie działa. Nie zamierzam umieszczać wszystkich moich przesłanych formularzy w żądaniach Ajax.
P.Brian.Mackey
2
+1 Zgadzam się, to jedyna prawdziwa prawidłowa odpowiedź, z wyjątkiem obejść spin.js i CodeMonkey.
Marco Demaio
7
I nadal w IE10
ChadT
9
I nadal w IE11!
bileyazan
2
Zameldowanie 2017!
Steve Wakeford
17

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

oldwizard
źródło
2
Tak, to działa świetnie (do tej pory testowane tylko w IE 10). Ale nie mogę zrozumieć, dlaczego animacja jest zatrzymywana, gdy wstępnie ładuję obraz do pamięci. Mogę wstępnie załadować twoje skrzypce i działa OK, tylko nie w moim kodzie, argh.
Simon East,
Zrobiłeś coś złego. :) Czy dodać obraz spinner jako tag img do swojej strony? Zaktualizowałem adres URL. Może pomóc.
oldwizard
Wygląda na to, że IE to tylko palant. Zatrzymuje animację po wstępnym załadowaniu. Po wstrzyknięciu za pomocą jquery animacja będzie kontynuowana. Dzięki za to rozwiązanie.
Anthony
8

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.

ToolsInternet OptionsAdvancedMultiMediaPlay animations in webpages

mam nadzieję że to pomoże.

funkymgrzyb
źródło
Nie, to nie rozwiązuje problemu w IE11 (ale +1 za próbę pomocy)! :( To znaczy - mam włączoną tę opcję i animowane GIF-y nie są animowane, gdy są wyświetlane w beforeunloadlub unloadzdarzeniu.
trejder
1
Nie ma to nic wspólnego z problemem przedstawionym w pytaniu.
user247702
2

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!

Lostphilosopher
źródło
Ustawienie src działało również dla mnie w IE11. W moim przypadku jest to połączone z ponownym dodaniem najpierw img html. Nie jestem pewien, dlaczego potrzebuję obu. Warto zauważyć, że ustawiam również opcję „wyświetlanie” (blokowanie), w przeciwieństwie do modyfikowania „widoczności”.
Cfold
2

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.

Klemen Tušar
źródło
1
To obejście działa, w oparciu o tę samą zasadę spin, js w zasadzie używając setTimeout JS do symulacji animacji gif.
Marco Demaio
1

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.

CodeMonkey
źródło
Dlaczego czytasz kod CSS za pomocą jQuery ( $(spinner).css('background-image')), ale zamiast ustawiać go w ten sam sposób, używasz czystego sposobu JavaScript ( spinner.style.backgroundImage). Twój kod nie działa dla mnie w żadnej przeglądarce. Jeśli używam bezpośrednio Twojego kodu, pojawia się cannot set backgroundImage property of undefinedbłąd. Jeśli zmienię twój kod, aby ustawić CSS za pomocą jQuery, kod działa bez żadnych błędów, ale obraz nie jest resetowany, a element div / spinner pozostaje pusty. Nie wiem dlaczego
trejder
Zweryfikowano ! Nie ma szans, Twój kod zadziała. Żadna przeglądarka nie może (stan na grudzień 2014 r.) Ustawićbackground-imagewłaściwości wwydarzeniachunloadlubbeforeunload. Zobacz to pytanie lub ten jsFiddle, aby uzyskać szczegółowe informacje.
trejder
1

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()" })
Zestaw
źródło
1

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';
}
Dan H.
źródło
0

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”).

David
źródło
0

JQuery:

$("#WhereYouWantTheImageToAppear").html('<img src="./Animated.gif" />');
danfolkes
źródło
0

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+


źródło
0

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.

znak
źródło
0

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} );
Matt Roy
źródło
-1

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)

Luca Detomi
źródło