GIF animé dans IE arrêt


109

Quelqu'un connaît-il un moyen de faire en sorte que les GIF animés continuent à être animés après avoir cliqué sur un lien ou soumis un formulaire sur la page sur laquelle vous vous trouvez dans IE? Cela fonctionne bien dans d'autres navigateurs.

Merci.


3
La seule bonne réponse ici est @AnthonyWJones. Pour les POST, les soumissions réelles (pas ajax), rien ne fonctionne.
P.Brian.Mackey

En fait, ce n'est pas du tout vrai. L'utilisation d'un délai d'expiration pour afficher l'image lors de l'événement onsubmit fonctionne parfaitement avec le formulaire POST.
oldwizard

@ P.Brian.Mackey - la solution de j.davis a fonctionné pour moi même pour une demande de poste. Cependant, nous utilisons également la boîte à outils ajaxcontrol pour effectuer un appel à la méthode côté serveur. Cela ne fonctionne pas dans ce cas.
Ankur-m


Découvrez la réponse de Jourdan ici . Je pense que c'est une meilleure solution et cela fonctionne aussi sur IE de bas niveau.
Jason Kresowaty

Réponses:


99

La solution acceptée n'a pas fonctionné pour moi.

Après quelques recherches supplémentaires, je suis tombé sur cette solution de contournement , et cela fonctionne réellement.

En voici l'essentiel:

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

et dans votre html:

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

Ainsi, lorsque le formulaire est soumis, la <img/>balise est insérée et, pour une raison quelconque, elle n'est pas affectée par les problèmes d'animation ie.

Testé dans Firefox, ie6, ie7 et ie8.



8
Dans votre code, vous n'effectuez jamais de POST. Uniquement l'appel javascript "onclick =". J'ai essayé cela avec un POST comme prévu lorsque vous cliquez sur Soumettre et cela ne fonctionne pas.
P.Brian.Mackey

Sauf si vous renvoyez false à la fin de votre onclick, le bouton d'envoi déclenchera un POST. C'est ce que font les boutons d'envoi.
Frug

2
-1 Cette réponse est également FAUX. Cela ne fonctionne pas dans IE7 et IE8 l'image gif FREZEES après la soumission du formulaire.
Marco Demaio

2
Cela a fonctionné pour moi en utilisant jQuery. Le hack est assez bizarre, je dois l'admettre. Voici comment cela fonctionnait dans mon exemple: code<div id = "img_content"> <img id = 'aj_loader' src = 'assets / 2631.gif' style = "display: none;" /> </div> Et puis: code$ ("# img_content"). html ($ ("# img_content"). html ());
misaizdaleka

35

vieille question, mais publiant ceci pour les collègues googleurs:

Spin.js FONCTIONNE pour ce cas d'utilisation: http://fgnass.github.com/spin.js/


Correction, cela fonctionne mais cesse de s'animer juste avant le chargement de la page. Donc, s'il s'agit d'une charge courte, il semble que l'animation se fige comme dans le numéro d'origine.
James McMahon le

Excellente solution, fonctionnant bien dans ie11 et semble donc toujours à jour et prise en charge.
Adam Knights

spin.js est malheureusement assez gourmand en CPU. Voir issues / 8 , issues / 200 , issues / 215
user247702

Spin.js ne fonctionne pas pour moi sur iPhone. Il se fige également dès qu'une page est redirigée vers une autre.
Ankur-m

18

IE suppose que le clic sur un lien annonce une nouvelle navigation où le contenu actuel de la page sera remplacé. Dans le cadre du processus de vérification, il arrête le code qui anime les GIF. Je doute que vous puissiez faire quoi que ce soit (à moins que vous ne naviguiez pas réellement, auquel cas utilisez return false dans l'événement onclick).


+1 - J'ai essayé les deux meilleures réponses. Aucun des deux ne fonctionne. Je ne vais pas faire de tous mes envois de formulaires des demandes ajax.
P.Brian.Mackey

2
+1 Je suis d'accord, c'est la seule vraie bonne réponse, à l'exception des solutions de contournement spin.js et CodeMonkey.
Marco Demaio

7
Et toujours dans IE10
ChadT

9
Et toujours dans IE11!
bileyazan

2
Enregistrement 2017!
Steve Wakeford

17

Voici un jsFiddle qui fonctionne très bien sur la soumission de formulaire avec method = "post". Le spinner est ajouté à l'événement de soumission de formulaire.

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

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

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

Voir le code jsFiddle ici

Testez-le dans votre navigateur IE ici


2
Oui, cela fonctionne très bien (testé uniquement dans IE 10 jusqu'à présent). Mais je ne peux pas comprendre pourquoi l'animation est arrêtée lorsque je précharge l'image en mémoire. Je peux précharger votre violon et cela fonctionne bien, mais pas dans mon code, argh.
Simon East

Vous avez fait quelque chose de mal. :) Ajouter l'image du spinner comme balise img à votre page? J'ai mis à jour l'URL. Pourrait aider.
oldwizard

IE est juste un con, il semble. Arrête l'animation lorsqu'elle est préchargée. Lorsqu'elle est injectée via jquery, l'animation continuera à avancer. Merci pour cette solution.
Anthony

8

Je suis tombé sur ce message, et bien qu'il ait déjà reçu une réponse, j'ai pensé que je devrais publier des informations qui m'ont aidé à résoudre ce problème spécifique à IE 10, et pourraient aider d'autres personnes à arriver à ce message avec un problème similaire.

J'ai été déconcerté par le fait que les gifs animés ne s'affichaient tout simplement pas dans IE 10, puis j'ai trouvé ce joyau.

ToolsInternet OptionsAdvancedMultiMediaPlay animations in webpages

J'espère que cela t'aides.


Non, cela ne résout pas le problème dans IE11 (mais +1 pour avoir essayé d'aider)! :( Autrement dit - j'ai cette option activée et les GIF animés ne sont pas animés, lorsqu'ils sont affichés dans beforeunloadou unloadévénement.
trejder

1
Cela n'a rien à voir avec le problème posé dans la question.
user247702

2

J'ai rencontré ce problème en essayant d'afficher un gif de chargement pendant le traitement d'un formulaire. Il y avait une couche supplémentaire de plaisir en ce que le même onsubmit devait exécuter un validateur pour s'assurer que le formulaire était correct. Comme tout le monde (sur chaque message de formulaire IE / gif sur Internet), je ne pouvais pas faire tourner le spinner de chargement dans IE (et, dans mon cas, valider / soumettre le formulaire). En parcourant les conseils sur http://www.west-wind.com j'ai trouvé un message par ev13wt qui suggérait que le problème était "... qu'IE ne rend pas l'image comme animée car elle était invisible lorsqu'elle était rendue. " Cela avait du sens. Sa solution:

Laissez vide là où le gif irait et utilisez JavaScript pour définir la source dans la fonction onsubmit - document.getElementById ('loadingGif'). Src = "chemin vers le fichier gif".

Voici comment je l'ai implémenté:

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

Cela a bien fonctionné pour moi dans tous les navigateurs!


La configuration de src a également fonctionné pour moi dans IE11. Dans mon cas, c'est en combinaison avec la réajout du html img en premier. Je ne sais pas pourquoi j'ai besoin des deux. Il est intéressant de noter que je suis également en train de définir «affichage» (pour bloquer), par opposition à la modification de «visibilité».
Cfold

2

Voici ce que j'ai fait. Tout ce que vous avez à faire est de diviser votre GIF pour dire 10 images (dans ce cas, j'ai commencé par 01.gifet j'ai terminé avec 10.gif) et spécifier le répertoire où vous les gardez.

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);    
}

Cette méthode fonctionne avec IE7, IE8 et IE9 (bien que vous puissiez utiliser IE9 spin.js). REMARQUE: je n'ai pas testé cela dans IE6 car je n'ai pas de machine exécutant un navigateur des années 60, bien que la méthode soit si simple qu'elle fonctionne probablement même dans IE6 et les versions inférieures.


1
Cette solution de contournement fonctionne, basée sur le même principe de rotation, js en utilisant essentiellement un setTimeout JS pour simuler une animation gif.
Marco Demaio

1

En relation avec cela, j'ai dû trouver un correctif où des gifs animés étaient utilisés comme image d'arrière-plan pour garantir que le style était conservé dans la feuille de style. Un correctif similaire a fonctionné pour moi là aussi ... mon script est allé quelque chose comme ça (j'utilise jQuery pour faciliter l'obtention du style d'arrière-plan calculé - comment faire cela sans jQuery est un sujet pour un autre article):

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;
}

[EDIT] Avec un peu plus de tests, je viens de réaliser que cela ne fonctionne pas avec les images d'arrière-plan dans IE8. J'ai essayé tout ce que je pouvais penser pour que IE8 rende une animation gif tout en chargeant une page, mais cela ne semble pas possible pour le moment.


Pourquoi vous lisez du code CSS en utilisant jQuery ( $(spinner).css('background-image')), mais au lieu de le définir de la même manière, vous utilisez du Javascript pur ( spinner.style.backgroundImage). Votre code ne fonctionne pour moi dans aucun navigateur. Si j'utilise directement votre code, j'obtiens une cannot set backgroundImage property of undefinederreur. Si je change votre code pour définir CSS à l'aide de jQuery, le code s'exécute sans aucune erreur, mais l'image n'est pas réinitialisée et l'élément div / spinner reste vide. Je ne sais pas pourquoi?
trejder

Vérifié ! Il n'y a aucune chance, votre code fonctionnera. Aucun navigateur est pas en mesure (partir de Décembre 2014) pour Armerbackground-imagepropriétéunloadoubeforeunloadévénements. Voir cette question ou ce jsFiddle pour plus de détails.
trejder

1

S'appuyant sur la réponse de @danfolkes, cela a fonctionné pour moi dans IE 8 et ASP.NET MVC3.

Dans notre _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">

<<< contenu ici >>> ...

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

Et dans nos liens de navigation:

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

ou

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

1

J'ai trouvé cette solution sur http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html et ça marche! Rechargez simplement l'image avant de la définir sur visible. Appelez la fonction Javascript suivante à partir du clic de votre bouton:

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';
}

0

Je me rends compte que c'est une vieille question et que maintenant les affiches originales ont chacune trouvé une solution qui fonctionne pour elles, mais j'ai rencontré ce problème et j'ai trouvé que les balises VML ne sont pas victimes de ce bogue IE. Les GIF animés se déplacent toujours pendant le déchargement de la page lorsqu'ils sont placés sur le navigateur IE à l'aide de balises VML.

Remarquez que j'ai détecté VML avant de prendre la décision d'utiliser des balises VML, donc cela fonctionne dans FireFox et d'autres navigateurs en utilisant un comportement GIF animé normal.

Voici comment j'ai résolu cela.

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

Naturellement, cela repose sur jQuery, jQueryUI et nécessite un GIF animé d'un certain type ("/images/loading_gray.gif").


0

Jquery:

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

0

J'ai juste eu un problème similaire. Celles-ci ont parfaitement fonctionné pour moi.

$('#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');

Une autre idée était d'utiliser .load () de jQuery; pour charger puis ajouter l'image.

Fonctionne dans IE 7+


0

Très, très tard pour répondre à celle-ci, mais je viens de découvrir que l'utilisation d'une image d'arrière-plan encodée en URI base64 dans le CSS, plutôt que conservée en tant qu'image séparée, continue de s'animer dans IE8.


0

Un moyen très simple consiste à utiliser jQuery et le plugin SimpleModal . Ensuite, lorsque j'ai besoin d'afficher mon gif de «chargement» lors de l'envoi, je fais:

$('*').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} );

-1

J'ai eu ce même problème, commun également à d'autres borwsers comme Firefox. Enfin, j'ai découvert que créer dynamiquement un élément avec un gif animé à l'intérieur lors de la soumission du formulaire ne s'animait pas, j'ai donc développé le workaorund suivant.

1) À document.ready(), chaque FORM trouvé dans la page, reçoit la position:relativepropriété puis à chacun est attaché un invisibleDIV.bg-overlay .

2) Après cela, en supposant que chaque valeur de soumission de mon site Web est identifiée par la btn-primaryclasse css, encore une fois document.ready(), je cherche ces boutons, je passe au parent FORM de chacun, et à la soumission du formulaire, je déclenche la showOverlayOnFormExecution(this,true);fonction, en passant le bouton cliqué et un booléen qui active la visibilité de 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 pour DIV.bg-overlayest le suivant:

.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) À toute soumission de formulaire, la fonction suivante est déclenchée pour afficher une superposition d'arrière-plan semi-blanc partout (qui refuse la possibilité d'interagir à nouveau avec le formulaire) et un gif animé à l'intérieur (qui montre visuellement une action de chargement).

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();
}

L'affichage du gif animé lors de l'envoi du formulaire, au lieu de l'ajouter à cet événement, résout le problème de «gel de l'animation gif» de divers navigateurs (comme dit, j'ai trouvé ce problème dans IE et Firefox, pas dans Chrome)

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.