javascript - objetos - google ads gif

Forma correcta de restablecer una animación GIF con pantalla: ninguna en Chrome

Question

El título se explica por sí mismo, pero proporcionaré una vista paso a paso sobre el tema. Esperemos que no sea el primero en haber notado este error (aparentemente) en Webkit / Chrome.

Quiero restablecer una animación GIF. Todos los ejemplos que he visto hasta ahora simplemente configuran el src de la imagen a sí mismo o lo establecen en una cadena vacía seguida de nuevo por el src original.

Echa un vistazo a este JSFiddle para referencia. El GIF se restablece perfectamente bien en IE, Firefox y Chrome.

El problema que tengo es cuando la imagen se display:none en Google Chrome solamente .

Compruebe este JSFiddle . El GIF se restablece bien en IE y Firefox antes de que se muestre en la página, ¡pero Chrome simplemente se niega a restablecer su animación!

Lo que he probado hasta ahora:

• Configurar el src a sí mismo como en Fiddle, no funciona en Chrome.
• Establecer el src en una cadena vacía y restaurarla a la predeterminada, tampoco funciona.
• Poner una envoltura alrededor de la imagen, vaciar el contenedor a través de .html('''') y volver a colocar la imagen dentro de ella, tampoco funciona.
• Cambiar la display de la imagen a través de .show() o .fadeIn() justo antes de configurar el src tampoco funciona.

La única solución que he encontrado hasta ahora es mantener la imagen con su display predeterminada y manipularla a través de .animate() ing y .css() con la opacidad, la altura y la visibilidad cuando sea necesario para simular una display:none comportamiento.

La razón principal (contexto) de esta pregunta es que quería restablecer un GIF del cargador ajax justo antes de desvanecerlo en la página.

Entonces, mi pregunta es, ¿existe una forma adecuada de restablecer la animación de una imagen GIF (que evita la display:none de Chrome display:none "falla") o es realmente una falla?

(ps. Puedes cambiar el GIF en los violines para un gif de animación más apropiado / más largo para la prueba)

Answer 1

Aquí está mi truco para las imágenes de fondo:

$(document).on(''mouseenter'', ''.logo'', function() {
  window.logo = (window.logocount || 0) + 1;
  var img = new Image();
  var url = "/img/mylogimagename.gif?v=" + window.logocount;
var that = this;
  $(img).load(function(){

     $(that ).css(''background-image'',''url('' + url + '')'');
  });
  img.src = url;
});

Answer 2

Chrome se ocupa de los cambios de estilo de manera diferente a otros navegadores.

En Chrome, cuando llama a .show() sin argumentos, el elemento no se muestra de inmediato justo donde lo llama. En su lugar, Chrome pone en cola la aplicación del nuevo estilo para su ejecución después de evaluar la porción actual de JavaScript; mientras que otros navegadores aplicarían el nuevo cambio de estilo inmediatamente. .attr() , sin embargo, no se pone en cola. Por lo tanto, está intentando configurar el src cuando el elemento aún no está visible de acuerdo con Chrome, y Chrome no hará nada al respecto cuando src original y src nuevo sean iguales.

En su lugar, lo que debe hacer es asegurarse de que jQuery establece el src después de display:block se aplica el display:block . Puedes usar setTimeout para lograr este efecto:

var src = ''http://i.imgur.com/JfkmXjG.gif'';
$(document).ready(function(){
    var $img = $(''img'');
    $(''#target'').toggle(
        function(){
            var timeout = 0; // no delay
            $img.show();
            setTimeout(function() {
                $img.attr(''src'', src);
            }, timeout);
        },
        function(){
            $img.hide();
        }
    );
});

Esto asegura que src se establezca después de display:block se ha aplicado al elemento.

La razón por la que esto funciona es porque setTimeout pone en cola la función para su ejecución más tarde (aunque sea mucho más tarde ), por lo que la función ya no se considera parte del "fragmento" actual de JavaScript, y proporciona una brecha para que Chrome renderice y aplique la display:block primero el display:block , haciendo que el elemento sea visible antes de establecer su atributo src .

Demostración: http://jsfiddle.net/F8Q44/19/

Gracias a shoky en #jquery of freenode IRC por proporcionar una respuesta más simple.

Alternativamente, puede forzar un redibujado para eliminar los cambios de estilo por lotes. Esto se puede hacer, por ejemplo, accediendo a la propiedad offsetHeight del elemento:

$(''img'').show().each(function() {
    this.offsetHeight;
}).prop(''src'', ''image src'');

Demostración: http://jsfiddle.net/F8Q44/266/

Answer 3

Esta solution carga el gif y lo saca del dom y luego lo regresa al src (evitando así otra descarga)

Acabo de probarlo con jquery para eliminar el atributo y funciona bien.

Ejemplo:

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script>

$(function() {

    $(''.reset'').click(resetGif);

    function resetGif() 
    {
        $(''.img1'').removeAttr(''src'', '''');
    }
});

</script>

</head>

<body>
    <img class="img1" src="1.gif" />
    <a href="#" class="reset">reset gif</a>
</body>
</html>

Answer 4

Esto pareció funcionar para mí en Chrome, se ejecuta cada vez justo antes de fundirme en la imagen y borrar, luego rellena el src y mi animación ahora comienza desde el principio cada vez.

var imgsrc = $(''#my_image'').attr(''src'');
$(''#my_image'').attr(''src'', '''');
$(''#my_image'').attr(''src'', imgsrc);

Answer 5

Experimenté problemas con todas las soluciones anteriores. Lo que finalmente funcionó fue reemplazar el src temporalmente con un gif transparente de 1px:

var transparent1PxGif = ''data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'';
var reloadGif = function(img) {
    var src = img.src;
    img.src = transparent1PxGif;
    img.offsetHeight; // triggers browser redraw
    img.src = src;
};

Answer 6

Han pasado varios años y he decidido revisar esto ya que tenemos varias opciones nuevas a nuestra disposición.

El problema con mi respuesta anterior es que obliga a volver a descargar el GIF cada vez que desee reiniciarlo. Si bien eso está bien para archivos pequeños, sigue siendo una sobrecarga que es mejor evitar si es posible.

Con eso en mente, tengo una nueva solución que utiliza AJAX para descargar el GIF una vez, y luego lo convierte en una URL de datos (a través de un FileReader) y la usa como fuente con una cadena de consulta aleatoria adjunta.

De esta manera, el navegador solo descarga la imagen una vez, e incluso puede almacenarla en caché correctamente, y el "reinicio" se extrae de ese recurso pre-descargado.

El único problema, por supuesto, es que debe asegurarse de que esté correctamente cargado antes de poder usarlo.

Demostración: http://adamhaskell.net/misc/numbers/numbers.html

Código relevante:

var url = "something.gif"; // fallback until the FileReader is done
function setup() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET",url,true);
    xhr.responseType = "blob";
    xhr.onreadystatechange = function() {
        if( this.readyState == 4) {
            var fr = new FileReader();
            fr.onload = function() {
                url = this.result; // overwrite URL with the data one
            };
            fr.readAsDataURL(this.response);
        }
    };
    xhr.send();
}
function getGIF() {
    return url+"?x="+Math.random();
}

Answer 7

La forma más confiable de "reiniciar" un GIF es agregar una cadena de consulta aleatoria. Sin embargo, esto significa que el GIF se volverá a descargar cada vez, así que asegúrese de que sea un archivo pequeño.

// reset a gif:
img.src = img.src.replace(//?.*$/,"")+"?x="+Math.random();

Answer 8

Me encontré con este hilo después de buscar muchos otros. El post de David Bell me llevó a la solución que necesitaba.

Pensé que publicaría mi experiencia en caso de que pudiera ser útil para cualquiera que intente lograr lo que estaba buscando. Esto es para una aplicación web HTML5 / JavaScript / jQuery que será una aplicación de iPhone a través de PhoneGap. Pruebas en cromo.

La meta:

1. Cuando el usuario pulsa / hace clic en el botón A, aparece un gif animado y se reproduce.
2. Cuando el usuario pulsa / hace clic en el botón B, gif desaparece.
3. Cuando el usuario pulsa / hace clic en el botón A nuevamente, después de presionar / hacer clic en el botón B, el gif animado debe reaparecer y jugar desde el principio.

El problema:

• Al presionar / hacer clic en el botón A, estaba agregando el gif a un div existente. Jugaría bien.
• Luego, al presionar / hacer clic en el botón B, estaba escondiendo el div contenedor, luego configurando el img src del gif en una cadena vacía (''''). Nuevamente, no hay problema (es decir, el problema aún no era evidente).

• Luego, al presionar / hacer clic en el botón A, después de presionar / hacer clic en el botón B, estaba volviendo a agregar la ruta al gif como el src.

  - Esto no funcionó. El gif se mostraría en los siguientes toques / clics del botón A ... sin embargo, cuanto más toqué / pulsé el botón A, más veces el gif se cargaría y comenzaría de nuevo. Es decir, si iba y venía, tocando / haciendo clic en el botón A y luego el botón B 3 veces, aparecería el gif y luego comenzaría / pararía / comenzaría 3 veces ... y toda la aplicación comenzó a sonar. Supongo que el gif se estaba cargando varias veces, a pesar de que había establecido el src en una cadena vacía cuando se pulsó / hizo clic en el botón B.

La solución:

Después de mirar el post de David Bell, llegué a mi respuesta.

1. Definí una variable global (llamémosla myVar) que contenía el div contenedor y la imagen (con la ruta de origen) dentro.
2. En la función de pulsar / hacer clic en el botón A, adjunté esa división de contenedor a una división principal existente en la dom.
3. En esa función, creé una nueva variable que contiene la ruta src del gif.

Al igual que David sugirió, hice esto (más un apéndice):

$(''#mainParent'').append(myVar);
var imgsrc = $(''#my_image'').attr(''src'');
$(''#my_image'').attr(''src'', '''');
$(''#my_image'').attr(''src'', imgsrc);

ENTONCES, en la función para el botón B, puse el src en una cadena vacía y luego eliminé el div que contiene el gif:

$(''#my_image'').attr(''src'', '''');
$(''#mainParent'').find(''#my_image'').remove();

Ahora, puedo tocar / hacer clic en el botón A, luego en el botón B, luego en el botón A, etc., durante todo el día. El gif se carga y reproduce al presionar / hacer clic en el botón A, luego se oculta al presionar / hacer clic en el botón B, luego se carga y se reproduce desde el principio en los siguientes toques del botón A cada vez, sin problemas.

Answer 9

Resolví una solución completa para este problema. Se puede encontrar aquí: https://.com/a/31093916/1520422

Mi solución reinicia la animación SIN volver a cargar los datos de imagen de la red.

También obliga a la imagen a volver a pintar para arreglar algunos artefactos de pintura que se produjeron (en cromo).

Answer 10

Solo porque todavía necesito esto de vez en cuando, pensé que la función JS pura que utilizo podría ser útil para otra persona. Esta es una forma pura de reiniciar un gif animado, sin volver a cargarlo. Puede llamar a esto desde un enlace y / o un evento de carga de documentos.

<img id="img3" src="../_Images/animated.gif">

<a onClick="resetGif(''img3'')">reset gif3</a>

<script type="text/javascript">

// reset an animated gif to start at first image without reloading it from server.
// Note: if you have the same image on the page more than ones, they all reset.
function resetGif(id) {
    var img = document.getElementById(id);
    var imageUrl = img.src;
    img.src = "";
    img.src = imageUrl;
};

</script>

En algunos navegadores, solo necesita restablecer img.src a sí mismo y funciona bien. En IE necesitas borrarlo antes de reiniciarlo. Este resetGif () elige el nombre de la imagen de la ID de la imagen. Esto es útil en caso de que alguna vez cambie el enlace de la imagen real para un ID dado porque no tiene que recordar cambiar las llamadas resetGiF ().

--Nico

Answer 11

Tengo un botón con una imagen animada sin bucle. Acabo de recargar la imagen con un poco de jQuery y esto parece estar funcionando para mí.

var asdf = $(".settings-button img").attr("src");
$(".settings-button img").attr("src", "").attr("src", asdf);