GIF animé dans IE arrêt

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.

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.

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

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

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

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

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.

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

J'espère que cela t'aides.

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!

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.

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.

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

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

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

Jquery:

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

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+

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.

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

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)