internet explorer - GIF animado en detener IE
internet-explorer animated-gif (16)
Aquí hay un jsFiddle que funciona bien en el envío de formularios con method = "post". El spinner se agrega al evento de envío de formularios.
$("form").bind("submit", onFormSubmit);
function onFormSubmit() {
setTimeout(showSpinner, 1);
}
function showSpinner() {
$("body").append($(''<img id="spinner" src="spinner.gif" alt="Spinner" />''));
}
¿Alguien sabe un trabajo para hacer que los GIF animados sigan siendo animados después de que haga clic en un enlace o envíe un formulario en la página de su encendido en IE? Esto funciona bien en otros navegadores.
Gracias.
Basándome en la respuesta de @danfolkes, esto funcionó para mí en IE 8 y ASP.NET MVC3.
En nuestro _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">
<<< contenido aquí >>> ...
<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>
Y en nuestros enlaces de navegación:
<input type="submit" value="Finish" class="submit-link" onclick="ShowThrobber()"/>
o
@Html.ActionLink("DoSometthing", "MyController", new { Model.SomeProperty }, new { onclick = "ShowThrobber()" })
En relación con esto, tuve que encontrar una solución donde se usaban los gifs animados como imagen de fondo para garantizar que el estilo se mantuviera en la hoja de estilos. Una solución similar funcionó para mí también ... mi script fue algo como esto (estoy usando jQuery para que sea más fácil obtener el estilo de fondo calculado - cómo hacerlo sin jQuery es un tema para otra publicación):
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] Con un poco más de prueba me acabo de dar cuenta de que esto no funciona con imágenes de fondo en IE8. He estado intentando todo lo que se me ocurre para hacer que IE8 renderice una animación gif cargando una página, pero no parece posible en este momento.
Encontré esta solución en http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html y FUNCIONA! Simplemente vuelva a cargar la imagen antes de configurarla en visible. Llame a la siguiente función de Javascript desde el botón de su botón:
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'';
}
Esto es lo que hice. Todo lo que debes hacer es dividir tu GIF para decir 10 imágenes (en este caso, comencé con 01.gif y terminé con 10.gif ) y especifico el directorio donde las guardas.
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 con IE7, IE8 e IE9 (aunque para IE9 puedes usar spin.js ). NOTA: No he probado esto en IE6 ya que no tengo una máquina que ejecute un navegador de los años 60, aunque el método es tan simple que probablemente funcione incluso en IE6 y versiones anteriores.
IE asume que al hacer clic en un enlace anuncia una nueva navegación donde se reemplazará el contenido de la página actual. Como parte del proceso de adaptación, detiene el código que anima los GIF. Dudo que haya algo que puedas hacer al respecto (a menos que en realidad no estés navegando, en cuyo caso usa return false en el evento onclick).
Jquery:
$("#WhereYouWantTheImageToAppear").html(''<img src="./Animated.gif" />'');
La solución aceptada no funcionó para mí.
Después de investigar un poco más, me encontré con esta solución , y realmente funciona.
Aquí está la esencia de esto:
function showProgress() {
var pb = document.getElementById("progressBar");
pb.innerHTML = ''<img src="./progress-bar.gif" width="200" height ="40"/>'';
pb.style.display = '''';
}
y en tu html:
<input type="submit" value="Submit" onclick="showProgress()" />
<div id="progressBar" style="display: none;">
<img src="./progress-bar.gif" width="200" height ="40"/>
</div>
Entonces, cuando se envía el formulario, se inserta la etiqueta <img/> y, por alguna razón, no se ve afectada por los problemas de animación, por ejemplo.
Probado en Firefox, ie6, ie7 y ie8.
Me doy cuenta de que esta es una vieja pregunta y que hasta ahora los carteles originales han encontrado una solución que funciona para ellos, pero me encontré con este problema y descubrí que las etiquetas VML no son víctimas de este error de IE. Los GIF animados se mueven durante la descarga de la página cuando se colocan en el navegador IE utilizando etiquetas VML.
Observe que detecté VML primero antes de tomar la decisión de usar etiquetas VML, así que esto funciona en Firefox y otros navegadores que usan el comportamiento GIF animado normal.
Así es como resolví esto.
<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..com'';
});
return progress;
})(window.LoadProgress || {}, window.jQuery);
</script>
Naturalmente, esto se basa en jQuery, jQueryUI y requiere un GIF animado de algún tipo ("/images/loading_gray.gif").
Me encontré con esta publicación, y si bien ya se ha respondido, sentí que debería publicar información que me ayudó con este problema específico de IE 10, y podría ayudar a otros a llegar a esta publicación con un problema similar.
Me sorprendió cómo los gifs animados simplemente no se muestran en IE 10 y luego encontré esta joya.
Herramientas → Opciones de Internet → Avanzado → MultiMedia → Reproducir animaciones en páginas web
espero que esto ayude.
Me encontré con este problema al tratar de mostrar un GIF de carga mientras se procesaba un envío de formulario. Tenía una capa adicional de diversión porque el mismo onsubmit tenía que ejecutar un validador para asegurarse de que el formulario era correcto. Como todos los demás (en todas las publicaciones de IE / GIF en Internet), no pude hacer que el spinner de carga "gire" en IE (y, en mi caso, valide / envíe el formulario). Mientras buscaba consejos en http://www.west-wind.com , encontré una publicación de ev13wt que sugería que el problema era "... que IE no representa la imagen como animada porque era invisible cuando se procesaba. " Eso tiene sentido. Su solución:
Deje en blanco donde iría el archivo .gif y use JavaScript para configurar el origen en la función de publicación: document.getElementById (''loadingGif''). Src = "ruta al archivo gif".
Así es como lo implementé:
<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>
¡Esto funcionó bien para mí en todos los navegadores!
Muy, muy tarde para responder a esto, pero acabo de descubrir que el uso de una imagen de fondo que está codificada como un URI base64 en el CSS, en lugar de mantenerse como una imagen separada, continúa animando en IE8.
Solo tuve un problema similar. Esto funcionó perfectamente para mí.
$(''#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'');
Otra idea fue usar jQuery''s .load (); para cargar y luego anteponer la imagen.
Funciona en IE 7+
Tuve el mismo problema, común también a otros tipos como Firefox. Finalmente descubrí que crear dinámicamente un elemento con un gif animado en el formulario enviado no animado, así que desarrollé el siguiente trabajo.
1) En document.ready() , cada FORMULARIO encontrado en la página, position:relative recepción position:relative propiedad position:relative y luego a cada uno se adjunta una DIV.bg-overlay invisible.
2) Después de esto, suponiendo que cada valor de envío de mi sitio web se identifica mediante btn-primary clase btn-primary css, de nuevo en document.ready() , busco estos botones, recorro el padre de formulario de cada uno, y al enviar el formulario, showOverlayOnFormExecution(this,true); función, DIV.bg-overlay clic en el botón y un booleano que alternan la visibilidad 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 para DIV.bg-overlay es el siguiente:
.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) En cualquier envío de formulario, se activa la siguiente función para mostrar una superposición de fondo semilíquico por todas partes (que niega la capacidad de interactuar de nuevo con la forma) y un gif animado dentro de ella (que muestra visualmente una acción de carga).
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();
}
Mostrando gif animado en el envío de formulario, en lugar de agregarlo en este evento, resuelve el problema de "congelación de animación gif" de varios navegadores (como dije, encontré este problema en IE y Firefox, no en Chrome)
Una forma muy sencilla es usar jQuery y el complemento SimpleModal . Luego, cuando necesito mostrar mi gif de "carga" en el envío, lo hago:
$(''*'').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} );
pregunta anterior, pero publicando esto para otros usuarios de Google:
Spin.js FUNCIONA para este caso de uso: http://fgnass.github.com/spin.js/