Gifs, Javascript, and Multiple Instances

Question

Maybe a stupid question, but it doesn't matter here.

Example: let's say I have one non-looping animated GIF, and I have two img elements.

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

Therefore, I use a little javascript to change the source of slot1.

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

works great. Gif plays from start to finish, but if I then change src slot2 to the same gif:

 changE('slot2'); 

slot1 resets it back to the beginning for synchronization with slot2, starting with gif.

Now I know that I can copy gifs and use 2 separate files, and I know about sprite sheets, but I'm curious. If I can use one copy of gif and use it several times on the page without all instances of gif being restarted each time another img element gets the same file as src?

Hope this is not confusing. Thanks.

Answer 1

As soon as the image is loaded into memory, all other objects that request this image using the same URL receive a link to the image from the browser cache. This avoids loading the same image multiple times. In the case of gif, one of the metadata that needs to be tracked is the current frame, which is not stored in the <img> dom element, but rather at the browser level in the structure that it uses to store this gif.

When loading, this frame index is reset. Thus, although the browser processes the gif loop, the second image download sets the current frame index to the beginning, so both images are synchronized.

This is a browser implementation, and most browsers seem to follow this implementation. One of the advantages of this is that if you have thousands of small gifs (from one URL) on one page, the browser will do a lot less computation to render them, because it will only change one frame index, not thousands.

Edit: To fix your code, you will have to basically add something random at the end of your image.

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

Therefore, the browser considers this to be a different image (i.e. a different URL).

Answer 2

Try using this solution:

 <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); 

This will set the clicke event for each image named calss animate , and the click event will only affect a specific image.