IE7 / IE8 e gifs animados congelados
-
05-07-2019 - |
Pergunta
Estou bastante certo de que este é um problema antigo.
Isto é como eu tornar minha gif animado:
<img id='loading' alt='loading' style="display: none; position:
relative; left:10px; top:2px;" src="<%= Url.Image("loading.gif") %>" />
Isto é como eu estou tentando desesperadamente para mostrá-lo no momento:
showLoading: function(gifId, butId) {
var n = gifId != undefined ? gifId : 'loading';
var l = $('#' + n);
//if browser is stupid
if ('v' == '\v') {
var s = l.attr('src');
var x = document.getElementById(n);
x.style.visibility = "visible";
x.style.display = "inline";
setTimeout("document.getElementById('" + n + "').src = '"+s+"';",
100);
} else {
l.show();
}
if (butId != undefined)
$('#' + butId).css('cursor', 'default').attr("disabled", true);
},
Problema: GIF animado parece congelado, não há nenhuma animação
mais estranho é que em outros trabalhos página tudo como um encanto.
P.S. é doloroso não discurso retórico sobre IE ... argh ...
EDIT:
Envolvido em torno com envergadura:
<span id='loading' style='display: none;
position: relative; left: 0px; top: 2px;'>
<img alt='loading' src="<%= Url.Image("loading.gif") %>" />
</span>
js alterado para:
if ('v' == '\v') {
var f = function() {
l.show();
l.attr('src', l.attr('src'));
};
setTimeout(f, 100);
} else {
l.show();
}
e misticamente -. Ele funciona agora
Solução
Eu corri para este uma vez. Se eu tentasse usar JavaScript para mostrar um pouco de carga throbber como o navegador mudou-se para uma página que ia demorar um pouco para carregar, IE não iria animar o GIF. Eu resolvi-lo, colocando o carregamento throbber diretamente no HTML (não inserido via JavaScript) em uma div oculto:
<div id="pseudo-progress-area" style="display: none;">
<h3>Please wait while we process your PayPal transaction...</h3>
<p style="text-align: center;">
<img src="/Media/Template/Images/LoadingProgressBar.gif" alt="" />
</p>
</div>
e, em seguida, usando JavaScript para alternar a visibilidade da div após um pequeno atraso (isso é usando uma versão mais antiga da biblioteca Prototype, mas você começa a idéia):
<script type="text/javascript">
// We have to call this function via a setTimeout() or else IE7 won't
// animate the GIF as the next page is loading.
var fnHideConfirmation = function() {
Element.hide( 'confirmation-area' );
Element.show( 'pseudo-progress-area' );
};
</script>
Essa função é acionado nos do formulário enviar botão:
<input
type="submit"
class="button"
name="SubmitConfirmation"
value="Buy Now →"
onclick="setTimeout(fnHideConfirmation, 50);" />
Então, ao invés de atrasar a alteração do atributo src, deixá-lo sozinho e apenas atrasar a chamada para todo o seu function () showLoading. Boa sorte!
Outras dicas
Spin.js obras para este caso de uso.
Eu encontrei aceito resposta um pouco complexa para compreender ou implementar no entanto eu tive o mesmo problema ao fazer isto,
Eu tinha seguinte HTML
<div id="progress_wheel_div" align="center" style="height:100%; display:none; vertical-align: middle;">
<img src="images/progress_wheel.gif" style="margin-top: 204px;"/>
<p class='arbitText' style="font-weight: bold;">Processing, Please wait!</p>
</div>
e em java script eu estava fazendo isso
function onSubmit() {
var divProgressWheel = document.getElementById("progress_wheel_div");
divProgressWheel.style.display = "block";
}
Mas não foi animando arquivo gif,
Solutions
Atualizado meu java script e fez como seguir
function onSubmit() {
setTimeout(showProgress, 500);
}
function showProgress() {
var divProgressWheel = document.getElementById("progress_wheel_div");
divProgressWheel.innerHTML = "<img src='images/progress_wheel.gif' style='margin-top: 204px;'/><p class='arbitText' style='font-weight: bold;'>Processing, Please wait!</p>";
divProgressWheel.style.display = "block";
}
Por favor note que divProgressWheel.innerHTML é o mesmo que o que eu tinha em html. Lá na frente podemos remover html desnecessária tão html modificado seria;
<div id="progress_wheel_div" align="center" style="height:100%; display:none; vertical-align: middle;">
</div>