gif animado codificado en base64 como fondo css?

Question

que tienen un gif animado codificado en mi css como tal:

.magicBg { 
background-image: url(data:image/gif;base64,R0lGODlhAQBkAPcAAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0ND ... 
} 

Este gif animado se codifica a jugar una vez.

Sin embargo, una vez que este gif animado se reproduce una vez como fondo en un elemento, nunca se reproduce de nuevo. Usando

$('body').removeClass('magicBg'); 
$('body').addClass('magicBg') 

No tiene ningún efecto - comenzamos en el marco final del gif. ¿Alguna idea de cómo hacer esta jugada desde el principio cada vez que se agrega la clase?

Desafortunadamente, another answer suggests volviendo a cargar el archivo .gif desde el servidor usando algunos parámetros de URL aleatorios. Por desgracia, esto no va a funcionar para mi caso, ya que estoy codificando la imagen en el CSS. ¿Puedes agregar un sello de fecha aleatorio a los datos de base64?

Answer 1

Puede agregar campos falsos adicionales a la url de datos para forzar la repetición del GIF animado:

//use date timestamp to ensure no duplicates 
url(data:image/gif;bogus:ABCDEF;base64,R0lGODlhA...); 

Answer 2

Me alegro de ver la tendencia de inserción base64 -encoded cargando gifs está despegando!

Volviendo a la cuestión en cuestión, hay un error muy común en su declaración de antecedentes, fixed that for you. Los siguientes:

base64,R0lGODlhEAAQAOMAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkv/////////////////////...

debería haber sido lugar

base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwE...

serio, de lo que has codificado simplemente un archivo dañado (por no decir imposible si estuviera usando una herramienta de codificación en línea)

para solucionar el problema, he descargado primero el archivo que haya incorporado (clic derecho > vista de la imagen de fondo > > haga clic derecho guardar como ... en Firefox). Esa imagen tampoco se pudo procesar correctamente:

Bastante curioso, se veía bien en la vista previa del archivo de Finder cuando la cargaba en SO imgur. Índice roto? La carga del archivo finalizó demasiado pronto. No sé lo suficiente sobre los aspectos técnicos del formato GIF para ofrecer una visión más allá de la especulación, pero he codificado el archivo fijo.

NB: sin necesidad de usar comillas en url()