Gifs, Javascript y Varias Instancias

Question

Quizás una pregunta tonta pero aquí va de todos modos.

Ejemplo: Digamos que tengo uno GIF no en bucle animado y tengo dos elementos img.

<img src="" id="slot1" /> 
<img src="" id="slot2" /> 

Así que uso un poco de javascript para cambiar la fuente de la ranura1.

function changE(x) 
{var image=document.getElementById (x); 
image.src="animated.gif"; 
} 

someButtonGotClicked=changE('slot1'); 

que funciona bien. Gif juega de principio a fin, pero si a continuación, cambiar el src de SLOT2 a la misma gif:

changE('slot2'); 

slot1 restablece es gif de nuevo al comienzo de sincronizar con SLOT2 empezando es gif.

Ahora sé que podría copiar el gif y tener 2 archivos separados para usar y sé de las hojas de sprites, pero tengo curiosidad si puedo usar una copia de un gif y hacer que se use varias veces en una página sin todas las instancias del archivo .gif se reinicia cada vez que otro elemento img recibe el mismo archivo que es src?

la esperanza de que no se presta a confusión. Gracias.

Answer 1

vez que una imagen se carga en la memoria, todos los demás objetos que solicitan esa imagen, usando la misma URL obtener una referencia a la imagen de la memoria caché del navegador. Esto evita cargar la misma imagen varias veces. En el caso de un gif, uno de los metadatos que se deben llevar un registro de es el cuadro actual, que se almacena en el elemento no <img> dom, sino más bien a nivel del navegador en la estructura que utiliza para almacenar ese gif.

En la carga, que el índice de marco es de reposición. Por lo tanto, mientras el navegador está procesando el bucle gif, una segunda carga de imagen establece el índice de fotograma actual al principio, por lo tanto, ambas imágenes se sincronizan.

Esta es una aplicación de navegador, y parece que la mayoría de los navegadores siguen esta aplicación. Una ventaja de esto es que si tiene miles de pequeños gifs (de la misma URL) en una página, el navegador haría mucho menos cálculo para representarlos, porque solo cambiaría un índice de fotograma, no miles.

Editar: Para solucionar el código habría que añadir algo al azar, básicamente, al final de su imagen.

function changE(x) 
{var image=document.getElementById (x); 
image.src="animated.gif?" + Math.random(); 
} 

El navegador considera que se trata de una imagen diferente (es decir, URL diferente).

Answer 2

Trate de usar una solución de este modo:

<img src="" id="slot1" class="animate" /> 
<img src="" id="slot2" class="animate" /> 


(function(doc, w) { 
    var changE, getElementsByClassName; 

    changE = function(img) { 
     img.src = "animated.gif"; 
    }; 
    getElementsByClassName = function(node, classname) { 
     if (node.getElementsByClassName) { // use native implementation if available 
      return node.getElementsByClassName(classname); 
     } else { 
      return (function getElementsByClass(searchClass, node) { 
       if (node == null) 
        node = doc; 
       var classElements = [], 
        els = node.getElementsByTagName("*"), 
        elsLen = els.length, 
        pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)"), i, j; 

       for (i = 0, j = 0; i < elsLen; i++) { 
        if (pattern.test(els[i].className)) { 
         classElements[j] = els[i]; 
         j++; 
        } 
       } 
       return classElements; 
      })(classname, node); 
     } 
    }; 
    w.onload = function() { 
     var imgs, i = 0, l; 
     imgs = getElementsByClassName(doc, 'animate'); 
     l = imgs.length; 
     for (i; i < l; i++) { 
      imgs[i].onclick = function(e) { changE(this); }; 
     } 
    }; 
})(document, window); 

Esto establecerá un evento Clicke para cada imagen con el nombre calss animate y el evento click solamente afectará a la imagen específica ha hecho clic.