2012-02-17 14 views
6

Forse una domanda sciocca ma qui va comunque.Gif, Javascript e istanze multiple

Esempio: supponiamo di avere una GIF animata senza loop e ho due elementi img.

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

Quindi io uso un po 'di javascript per cambiare l'origine del slot1.

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

someButtonGotClicked=changE('slot1'); 

che funziona bene. Gif gioca dall'inizio alla fine, ma se poi cambio lo src del slot2 allo stesso gif:

changE('slot2'); 

slot1 azzera è gif di nuovo al punto di partenza per la sincronizzazione con slot2 di partenza è gif.

Ora so che potrei copiare la gif e avere 2 file separati da usare e so di fogli sprite ma sono curioso Se posso usare una copia di una gif e usarla più volte su una pagina senza che tutte le istanze della gif vengano riavviate ogni volta che un altro elemento img riceve lo stesso file di src?

Spero che non sia stato di confusione. Grazie.

+0

Su quale browser si osserva questo comportamento? – maerics

+0

Suppongo che tu non voglia semplicemente rimuovere la prima gif prima di aggiungerne una nuova? –

+0

Hai provato ad accedere all'elemento 'img' tramite' images'-collection? 'function changE (x) {var image = document.images [x]; image.src = "animato.gif " – Teemu

risposta

6

Dopo aver caricato un'immagine in memoria, tutti gli altri oggetti che richiedono quell'immagine, utilizzando lo stesso URL, ottengono un riferimento all'immagine dalla cache del browser. Ciò evita di caricare la stessa immagine più volte. Nel caso di una gif, uno dei meta dati da tenere traccia di è il frame corrente, che non è memorizzato nell'elemento <img> dom, ma piuttosto a livello di browser nella struttura che utilizza per memorizzare quella gif.

In caricamento, l'indice di frame viene ripristinato. Quindi, mentre il browser sta elaborando il ciclo GIF, un secondo caricamento dell'immagine imposta l'indice corrente del fotogramma all'inizio, quindi entrambe le immagini si sincronizzano.

Questa è un'implementazione del browser e sembra che la maggior parte dei browser segua questa implementazione. Un vantaggio è che se in una pagina ci sono migliaia di piccoli gif (dallo stesso URL), il browser farebbe molto meno calcoli per renderli, perché cambierebbe solo un indice di frame, non migliaia.

Modifica: Per correggere il codice, è necessario aggiungere qualcosa di casuale alla fine dell'immagine.

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

Quindi il browser pensa che questa sia un'immagine diversa (ad esempio un URL diverso).

+0

L'aggiunta di una stringa di query a un URL immagine ha un effetto su questo? –

+0

Sì, è una soluzione alternativa, perché è considerato un URL diverso. – Candide

+0

È intelligente. Ha qualche svantaggio? – Nikki

0

Prova utilizzando una soluzione in questo 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); 

Questo creerà un evento clicke per ogni immagine con il nome calss animate e l'evento click effettuerà solo l'immagine specifica cliccato.

+0

Cercherò sicuramente di comprendere la tua soluzione quando avrò più tempo: P – Nikki

+0

Se avete domande lasciatemi una riga.La maggior parte del codice è solo la selezione delle immagini per nome della classe.Se siete in grado di, vorrei raccomandare di controllare jQuery, Si trasformerebbe tutto il codice di cui sopra in questo: '$ (. animate) .click (function (e) {changE (this);}); 'http://jquery.com/ – Paul

Problemi correlati