2012-10-12 405 views
5

Tengo una página con 7 archivos gif.¿Hay alguna forma de sincronizar archivos gif?

¿Hay alguna manera de sincronizarlos a todos, para que comiencen a jugar al mismo tiempo?

Estaba pensando en precargarlos, pero aún así no pueden comenzar a sincronizarse si uno tarda más en cargar que en otro.

+5

No tiene control sobre el inicio de archivos .gif con javascript (o cualquier biblioteca de JavaScript). Lo mejor que puede hacer es precargarlos y luego restablecer el src para todos al mismo tiempo una vez que estén cargados. Eso los haría reiniciar todos. – Archer

+0

Pensé que esta sería la respuesta de Archer. ¿Qué quiere decir con "reiniciar el src"? – williamsongibson

+0

Hay 2 formas de hacerlo. Ya sea que tenga las imágenes en la página y que todas se carguen, o que las imágenes en la página estén ocultas y las cargue en la memoria, usando objetos de imagen que estén puramente en el script. Una vez que estén todos cargados, simplemente configure el src para cada una de las imágenes en la página. Al restablecer el src, simplemente quise configurar el atributo src en lo que ya es - '$ (" img "). Each (function() {$ (this) [0] .src = $ (this) [0]. src;}); ' – Archer

Respuesta

10

Como señaló @Archer anteriormente, una forma de hacerlo es precargarlos y luego restablecer el src. Usando jQuery que podría hacer algo como:

$(window).load(function() { 
    $('.preload').attr('src', function(i,a){ 
     $(this).attr('src','').removeClass('preload').attr('src',a); 
    }); 
}); 

verlo en jsfiddle.

-2

Pruebe precargarlos todos en el encabezado de la página y ejecutarlos cuando el cuerpo se carga. Haga una función, function gifs{} tal vez, y ejecútelo así: <body onload="gifs()">.

1

Considera la posibilidad de reemplazar tus gif con secuencias png (hojas de sprites) o incluso secuencias jpg, según el tipo de contenido.

Cree un div del tamaño de animación deseado, establezca la hoja de sprite como imagen de fondo con el desbordamiento oculto.

Cree un temporizador en javascript que actualice todas las animaciones (posiciones de la imagen de fondo) al mismo tiempo con cada tilde, lo que le permite controlar la velocidad de fotogramas con mucha precisión.

He usado esta técnica antes y funciona bien si las hojas de sprites no están afectando demasiado los tiempos de carga.

Cuestiones relacionadas