Alguém conhece uma solução alternativa para fazer GIFs animados continuarem a ser animados depois de clicar em um link ou enviar um formulário na página que você está no IE? Isso funciona bem em outros navegadores.
Obrigado.
Alguém conhece uma solução alternativa para fazer GIFs animados continuarem a ser animados depois de clicar em um link ou enviar um formulário na página que você está no IE? Isso funciona bem em outros navegadores.
Obrigado.
Respostas:
A solução aceita não funcionou para mim.
Depois de mais algumas pesquisas, descobri essa solução alternativa e ela realmente funciona.
Aqui está a essência disso:
function showProgress() {
var pb = document.getElementById("progressBar");
pb.innerHTML = '<img src="./progress-bar.gif" width="200" height ="40"/>';
pb.style.display = '';
}
e em seu html:
<input type="submit" value="Submit" onclick="showProgress()" />
<div id="progressBar" style="display: none;">
<img src="./progress-bar.gif" width="200" height ="40"/>
</div>
Portanto, quando o formulário é enviado, a <img/>
tag é inserida e, por algum motivo, não é afetada pelos problemas de animação, por exemplo.
Testado no Firefox, ie6, ie7 e ie8.
code
<div id = "img_content"> <img id = 'aj_loader' src = 'assets / 2631.gif' style = "display: none;" /> </div> E então: code
$ ("# img_content"). html ($ ("# img_content"). html ());
velha pergunta, mas postando para outros googlers:
Spin.js FUNCIONA neste caso de uso: http://fgnass.github.com/spin.js/
O IE assume que o clique em um link anuncia uma nova navegação onde o conteúdo da página atual será substituído. Como parte do processo de preparação para isso, ele interrompe o código que anima os GIFs. Duvido que haja algo que você possa fazer sobre isso (a menos que você não esteja realmente navegando; nesse caso, use return false no evento onclick).
Aqui está um jsFiddle que funciona muito bem no envio de formulário com method = "post". O botão giratório é adicionado no evento de envio de formulário.
$("form").bind("submit", onFormSubmit);
function onFormSubmit() {
setTimeout(showSpinner, 1);
}
function showSpinner() {
$("body").append($('<img id="spinner" src="spinner.gif" alt="Spinner" />'));
}
Eu me deparei com este post, e embora já tenha sido respondido, senti que deveria postar algumas informações que me ajudassem com esse problema específico do IE 10, e que possam ajudar outras pessoas que chegam a este post com um problema semelhante.
Fiquei perplexo ao ver como os gifs animados simplesmente não eram exibidos no IE 10 e então encontrei esta joia.
Tools→ Internet Options→ Advanced→ MultiMedia→Play animations in webpages
espero que isto ajude.
beforeunload
ou unload
evento.
Eu encontrei esse problema ao tentar mostrar um gif de carregamento durante o processamento de um envio de formulário. Ele tinha uma camada adicional de diversão, pois o mesmo onsubmit precisava executar um validador para garantir que o formulário estava correto. Como todo mundo (em todas as postagens do formulário IE / gif na Internet), não consegui fazer o botão giratório de carregamento "girar" no IE (e, no meu caso, validar / enviar o formulário). Enquanto procurava conselhos em http://www.west-wind.com , encontrei uma postagem de ev13wt que sugeria que o problema era "... que o IE não renderiza a imagem como animada porque ela estava invisível quando foi renderizada. " Isso fazia sentido. Sua solução:
Deixe em branco onde o gif iria e use o JavaScript para definir a fonte na função onsubmit - document.getElementById ('loadingGif'). Src = "caminho para o arquivo gif".
Veja como eu implementei:
<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>
Isso funcionou bem para mim em todos os navegadores!
Aqui está o que eu fiz. Tudo que você precisa fazer é dividir seu GIF para dizer 10 imagens (neste caso, comecei com 01.gif
e terminei com 10.gif
) e especificar o diretório onde você as mantém.
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);
}
Este método funciona com IE7, IE8 e IE9 (embora você possa usar o IE9 spin.js
).
NOTA: Não testei isso no IE6, pois não tenho uma máquina rodando um navegador dos anos 60, embora o método seja tão simples que provavelmente funciona até no IE6 e anteriores.
Relacionado a isso, eu tive que encontrar uma solução onde os gifs animados eram usados como uma imagem de fundo para garantir que o estilo fosse mantido na folha de estilo. Uma correção semelhante funcionou para mim também ... meu script era mais ou menos assim (estou usando jQuery para tornar mais fácil obter o estilo de fundo calculado - como fazer isso sem jQuery é um tópico para outra postagem):
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;
}
[EDITAR] Com mais alguns testes, acabei de perceber que isso não funciona com imagens de fundo no IE8. Tenho tentado tudo que posso pensar para fazer o IE8 renderizar uma animação GIF enquanto carrega uma página, mas não parece possível neste momento.
$(spinner).css('background-image')
), mas em vez de configurá-lo da mesma forma, você está usando o modo Javascript puro ( spinner.style.backgroundImage
). Seu código não está funcionando para mim em nenhum navegador. Se eu usar diretamente seu código, estou recebendo um cannot set backgroundImage property of undefined
erro. Se eu alterar seu código para definir CSS usando jQuery, o código será executado sem erros, mas a imagem não será redefinida e o elemento div / spinner permanecerá vazio. Eu não sei porque
background-image
propriedades emunload
oubeforeunload
eventos. Veja esta pergunta ou este jsFiddle para obter detalhes.
Com base na resposta de @danfolkes, isso funcionou para mim no IE 8 e ASP.NET MVC3.
Em nosso _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">
<<< conteúdo aqui >>> ...
<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>
E em nossos links de navegação:
<input type="submit" value="Finish" class="submit-link" onclick="ShowThrobber()"/>
ou
@Html.ActionLink("DoSometthing", "MyController", new { Model.SomeProperty }, new { onclick = "ShowThrobber()" })
Encontrei esta solução em http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html e FUNCIONA! Basta recarregar a imagem antes de definir como visível. Chame a seguinte função Javascript a partir do clique de seu botão:
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';
}
Sei que essa é uma questão antiga e que agora os participantes originais encontraram uma solução que funciona para eles, mas me deparei com esse problema e descobri que as tags VML não são vítimas desse bug do IE. Os GIFs animados ainda se movem durante o descarregamento da página quando colocados no navegador IE usando tags VML.
Observe que detectei o VML primeiro, antes de tomar a decisão de usar tags VML, portanto, isso está funcionando no FireFox e em outros navegadores que usam o comportamento normal de GIF animado.
Veja como eu resolvi isso.
<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>
Naturalmente, isso depende do jQuery, jQueryUI e requer um GIF animado de algum tipo ("/images/loading_gray.gif").
Só tive um problema semelhante. Isso funcionou perfeitamente para mim.
$('#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');
Outra ideia era usar .load () do jQuery; para carregar e anexar a imagem.
Funciona no IE 7+
Uma maneira muito fácil é usar o plugin jQuery e SimpleModal . Então, quando preciso mostrar meu gif "carregando" no envio, eu faço:
$('*').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} );
Eu tive esse mesmo problema, comum também a outros borwsers como o Firefox. Finalmente descobri que criar dinamicamente um elemento com gif animado dentro de form submit não animado, então desenvolvi o seguinte workaorund.
1) Em document.ready()
, cada FORMULÁRIO encontrado na página, recebe uma position:relative
propriedade e a seguir a cada um está anexado um invisível DIV.bg-overlay
.
2) Depois disso, supondo que cada valor de envio do meu site seja identificado pela btn-primary
classe css, novamente em document.ready()
, procuro esses botões, dirijo para o FORM pai de cada um e no formulário envio, disparo a showOverlayOnFormExecution(this,true);
função, passando o botão clicado e um booleano que alterna a visibilidade 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 para DIV.bg-overlay
é o seguinte:
.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) Em qualquer envio de formulário, a função a seguir é disparada para mostrar uma sobreposição de fundo semi-branco sobre ele (que nega a capacidade de interagir novamente com o formulário) e um gif animado dentro dele (que mostra visualmente uma ação de carregamento).
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();
}
Mostrar gif animado no envio do formulário, em vez de anexá-lo neste evento, resolve o problema de "congelamento de animação gif" de vários navegadores (como disse, encontrei esse problema no IE e no Firefox, não no Chrome)