GIF animé en IE arrêt
Quelqu'un sait-il qu'il est possible de continuer à animer des fichiers GIF animés une fois que vous avez cliqué sur un lien ou envoyé un formulaire sur la page que vous êtes dans IE? Cela fonctionne très bien dans les autres navigateurs.
Merci.
La solution acceptée ne fonctionnait pas 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 balise <img/> est insérée et, pour une raison quelconque, elle n'est pas affectée par les problèmes d'animation.
Testé sous Firefox, ie6, ie7 et ie8.
vieille question, mais en postant ceci pour les autres googlers:
Spin.js FONCTIONNE pour ce cas d'utilisation: http://fgnass.github.com/spin.js/
IE suppose que le fait de cliquer sur un lien annonce une nouvelle navigation dans laquelle le contenu de la page actuelle sera remplacé. Dans le cadre du processus de recherche, il arrête le code qui anime les fichiers GIF. Je doute que vous puissiez faire quoi que ce soit (à moins que vous ne naviguiez pas, auquel cas, utilisez return false dans l'événement onclick).
Voici un jsFiddle qui fonctionne parfaitement sur le formulaire submit with 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" />'));
}
Je suis tombé sur ce message et, bien qu'il ait déjà reçu une réponse, je devais publier des informations qui m'ont aidé à résoudre ce problème spécifique à IE 10, et qui pourraient aider les autres utilisateurs arrivant à ce message avec un problème similaire.
Je suis déconcertée par le fait que les gifs animés ne s'affichent tout simplement pas dans IE 10, puis j'ai trouvé cette gemme.
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 soumis. Il y avait une couche supplémentaire de plaisir dans le fait que le même onsubmit devait exécuter un validateur pour s'assurer que le formulaire était correct. Comme tout le monde (sur chaque post de formulaire IE/GIF sur Internet), je ne pouvais pas obtenir le spinner de chargement "en rotation" dans IE (et, dans mon cas, valider/envoyer le formulaire). Tout en cherchant des conseils sur http://www.west-wind.com j'ai trouvé un article de ev13wt qui suggérait que le problème était "... que IE ne rend pas l'image animée c'était invisible quand il a été rendu. " Cela avait du sens. Sa solution:
Laisser vide où le gif irait et utiliser JavaScript pour définir la source dans la fonction onsubmit - document.getElementById ('loadingGif'). Src = "chemin du 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 casser votre GIF pour dire 10 images (dans ce cas, j'ai commencé par 01.gif et fini par 10.gif) et spécifier le répertoire dans lequel vous les conservez.
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 pour IE9, vous pouvez utiliser spin.js ) .NOTE: Je n’ai pas testé cela dans IE6 car je n’ai aucun ordinateur avec un navigateur des 60 , bien que la méthode soit si simple, cela fonctionne probablement même dans IE6 et inférieur.
Trouvé cette solution sur http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html et ça marche! Il suffit de recharger l'image avant de définir visible. Appelez la fonction Javascript suivante depuis le bouton 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';
}
Dans le même ordre d'idées, je devais trouver un correctif dans lequel les gifs animés étaient utilisés comme image d'arrière-plan pour garantir le respect du style dans la feuille de style. Un correctif similaire a également fonctionné pour moi là-bas ... mon script ressemblait à ceci (j'utilise jQuery pour faciliter l'obtention du style d'arrière-plan calculé. Comment le faire sans jQuery est un sujet pour un autre 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;
}
[EDIT] Avec un peu plus de tests, je viens de me rendre compte que cela ne fonctionne pas avec les images d'arrière-plan dans IE8. J'ai essayé tout ce que je pouvais imaginer pour que IE8 rende une animation gif 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()" })
Jquery:
$("#WhereYouWantTheImageToAppear").html('<img src="./Animated.gif" />');
Un moyen très simple consiste à utiliser jQuery et SimpleModal plugin . Ensuite, lorsque je dois afficher mon "chargement" gif 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} );
Je viens d'avoir un problème similaire. Ceux-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 le fichier .load () de jQuery; pour charger et ensuite ajouter l'image.
Fonctionne dans IE 7+
Je me rends compte que c’est une vieille question et que les affiches originales ont chacune trouvé une solution qui leur convient, mais j’ai rencontré ce problème et constaté que les balises VML ne sont pas victimes de ce bogue IE. Les fichiers GIF animés continuent de se déplacer lors du déchargement de la page lorsqu'ils sont placés dans le navigateur IE à l'aide de balises VML.
Remarquez que j'ai d'abord détecté VML avant de prendre la décision d'utiliser des balises VML, ce qui fonctionne dans FireFox et d'autres navigateurs utilisant le comportement GIF animé normal.
Voici comment j'ai résolu ceci.
<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 fichier GIF animé de type ("/images/loading_gray.gif").
Très, très tard pour répondre à cette question, mais je viens de découvrir que l’utilisation d’une image d’arrière-plan codée sous forme d’URI base64 dans le CSS, plutôt que conservée sous forme d’image distincte, continue d’animer dans IE8.