jquery - para - Reinicie GIF animado como imagen de fondo
fondos gif para paginas web (8)
¿Es posible reiniciar un GIF animado usado como background-image ?
Considera este HTML:
<div id="face">
<div id="eyes"></eyes>
</div>
Y este estilo:
#eyes.blink {
background-image:url(''blink.gif'');
}
Me gustaría que la animación de blink.gif reproduzca cada vez que agrego el blink clase a #eyes , no solo la primera vez.
Esperaba que esto funcionara:
function startBlink() {
$(''#eyes'').addClass(''blink'');
}
function stopBlink() {
$(''#eyes'').removeClass(''blink'');
}
El problema es que tanto el navegador Firefox como el navegador WebKit no reproducen una animación GIF de imagen de fondo una vez que se ha reproducido una vez. Agregar / eliminar la clase de parpadeo solo funciona la primera vez.
¿Has considerado usar la misma imagen dos veces llamada blink.gif y blink2.gif, agregando dos clases para ellos y alternando entre clases?
<div id="face">
<div id="eyes"></eyes>
</div>
.blink {
background-image:url(''blink.gif'');
}
.blink2 {
background-image:url(''blink2.gif'');
}
function MakeBlink()
{
if ($(''#eyes'').hasClass(''blink''))
{
$(''#eyes'').removeClass(''blink'').addClass(''blink2'');
} else
{
$(''#eyes'').removeClass(''blink2'').addClass(''blink'');
}
}
Combiné varias partes de la solución para hacer una solución completa que resuelva (con suerte) todos los problemas:
- Determine la URL de imagen de fondo de un elemento (a partir
background-imagecss) - Activa un reinicio para esa imagen SIN recargarla desde la web
- Reiniciando en todos los lugares (sin tocar cada uno individualmente)
- Asegurarse de que el objetivo se vuelve a pintar sin artefactos después de reiniciar la animación
En mi solución, creo imágenes de ayuda que se agregan al cuerpo, pero que están ocultas de tal forma que aún son renderizadas por el navegador pero no interactúan con la página visualmente usando position: absolute; left: -5000px; position: absolute; left: -5000px; .
Una referencia a nuestras imágenes de ayuda se almacena en caché en resetHelperImages para que podamos reutilizarlas para la misma imagen en llamadas posteriores.
Estoy usando jQuery para mi ejemplo, pero también podría adaptarse para que funcione sin jQuery.
Probado en: Chrome (Versión 43.0.2357.130 m)
var resetHelperImages = {};
function restartAnimation(elem) {
elem = $(elem);
for (var i = 0; i < elem.length; i++) {
var element = elem[i];
// code part from: http://.com/a/14013171/1520422
var style = element.currentStyle || window.getComputedStyle(element, false);
// var bgImg = style.backgroundImage.slice(4, -1).replace(/"/g, '''');
var bgImg = style.backgroundImage.match(/url/(([^/)]+)/)/)[1].replace(/"/g, '''');
// edit: Suggestion from user71738 to handle background-images with additional settings
var helper = resetHelperImages[bgImg]; // we cache our image instances
if (!helper) {
helper = $(''<img>'')
.attr(''src'', bgImg)
.css({
position: ''absolute'',
left: ''-5000px''
}) // make it invisible, but still force the browser to render / load it
.appendTo(''body'')[0];
resetHelperImages[bgImg] = helper;
setTimeout(function() {
helper.src = bgImg;
}, 10);
// the first call does not seem to work immediately (like the rest, when called later)
// i tried different delays: 0 & 1 don''t work. With 10 or 100 it was ok.
// But maybe it depends on the image download time.
} else {
// code part from: http://.com/a/21012986/1520422
helper.src = bgImg;
}
}
// force repaint - otherwise it has weird artefacts (in chrome at least)
// code part from: http://.com/a/29946331/1520422
elem.css("opacity", .99);
setTimeout(function() {
elem.css("opacity", 1);
}, 20);
}
.myBgImageClass {
background-image: url(''http://i410.photobucket.com/albums/pp184/OllieMarchant/Countup.gif'');
width: 100px;
height: 150px;
background-size: 100%;
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myBgImageClass"></div>
<button onclick="restartAnimation($(''.myBgImageClass''))">restart</button>
Descubrí que también puedes agregar un ?+Math.random() al final de la imagen src y volverá a cargar el .gif.
Existe una alternativa que no recarga el GIF cada vez y desperdicia ancho de banda.
Implica almacenar el GIF como Base64 en la memoria (evitando la memoria caché del navegador) y utiliza la API FileReader (que parece ser compatible con todos los navegadores modernos ). Tenga en cuenta que la carga de imágenes de esta manera está sujeta a la política de origen cruzado (a diferencia de las soluciones de recarga de imágenes).
Actualización: el almacenamiento en caché del navegador es cada vez más inteligente sobre el almacenamiento en caché de los URI de datos de imagen de fondo, lo que hace que la animación no vuelva a comenzar. Descubrí que tenía que agregar una cadena aleatoria de almacenamiento de caché a la url de datos ahora (que, de acuerdo con el esquema DataURI , debería considerarse un atributo opcional. Probado en Chrome e IE Edge).
Véalo en acción: http://jsfiddle.net/jcward/nknLrtzL/10/
Así es como funciona. Esta función carga la imagen como una cadena codificada en Base64.
function toDataUrl(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open(''GET'', url);
xhr.responseType = ''blob''; // IE11, set responseType must come after .open()
xhr.send();
}
Luego, cuando quiera reiniciar la animación GIF, cambie la propiedad de background-image a none , luego la cadena base64 (en algunos navegadores, debe volver a agregar el elemento secundario para activar la actualización sin un setTimeout):
$div.css({backgroundImage: "none"});
$div.parent().add($div); // Some browsers need this to restart the anim
// Slip in a cache busting random number to the data URI attributes
$div.css({backgroundImage: "url("+img_base64.replace("image/gif","image/gif;rnd="+Math.random())+")"});
Gracias a esta respuesta por la función toDataURL (con corrección para IE11).
Por alguna razón esto funciona:
// Append the image to the page
var i = new Image();
i.src = ''some.gif'';
document.body.appendChild(i);
// Now execute this line and the gif will restart
// (anywhere it appears on the page, including CSS backgrounds)
i.src = ''some.gif'';
Esto requiere que se agregue un elemento DOM de imagen real a la página, pero puede ocultarlo con visibility: hidden . Esto no requiere que la imagen se descargue a través de la red varias veces.
Solo probé esto en Firefox y Chrome. No estoy seguro acerca de otros navegadores.
Puedes hacer que el gif animado se reproduzca volviéndolo a cargar. Esto no es ideal para el ancho de banda, especialmente si su imagen es grande, pero forzará un reinicio de la animación.
En mi ejemplo, lo estoy agregando y eliminando en un onclick de <div id="animated"> :
$(''#animated'').click(function() {
/* Reference to the clicked element and toggle the .go class */
var $div = $(this);
$div.toggleClass(''go'');
/* Start the animated gif */
if ($div.hasClass(''go'')) {
/* Create an <img> element and give it the animated gif as a src. To
force a reload we add a date parameter to the URL */
var img = document.createElement(''img'');
img.src = "http://yoursite.com/animated.gif?p" + new Date().getTime();
/* Once the image has loaded, set it as the background-image */
$(img).load(function(){
$div.css({backgroundImage: "url("+img.src+")"});
});
/* Remove the background-image */
} else {
$div.css({backgroundImage: "none"});
}
})
Demostración de ello en acción.
Respecto a share publicada por , encontré que funcionaba maravillosamente.
Sin embargo, se descompone si su imagen de fondo tiene varias partes en capas, como esta:
background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg),
radial-gradient(ellipse at center,
rgba(255,255,255,1) 0%,
rgba(255,255,255,1) 50%,
rgba(255,255,255,0) 80%);
Para evitar esta limitación, modifiqué la línea que encuentra la url de la imagen de fondo, así:
var bgImg = style.backgroundImage.match(/url/(([^/)]+)/)/)[1].replace(/"/g, '''');
Esto usa una expresión regular para extraer solo la porción de URL de la imagen de fondo.
Habría agregado esto como un comentario a la share , pero soy un novato sin reputación, por lo que se me impidió hacerlo. Aquellos con representantes adecuados pueden querer agregar la línea a la respuesta real.
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