Maybe a silly question but here goes anyway.

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" />

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

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

someButtonGotClicked=changE('slot1'); 

that works fine. Gif plays from start to end but if I then change the src of slot2 to the same gif:

changE('slot2');  

slot1 resets it's gif back to the start to sync with slot2 starting it's gif.

Now i'm aware I could copy the gif and have 2 seperate files to use and I know about sprite sheets but I'm curious If I can use one copy of a gif and have it used multiple times on a page without all instances of the gif being restarted everytime another img element recieves the same file as it's src?

Hope that wasn't confusing. Thanks.

Maybe a silly question but here goes anyway.

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" />

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

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

someButtonGotClicked=changE('slot1'); 

that works fine. Gif plays from start to end but if I then change the src of slot2 to the same gif:

changE('slot2');  

slot1 resets it's gif back to the start to sync with slot2 starting it's gif.

Now i'm aware I could copy the gif and have 2 seperate files to use and I know about sprite sheets but I'm curious If I can use one copy of a gif and have it used multiple times on a page without all instances of the gif being restarted everytime another img element recieves the same file as it's src?

Hope that wasn't confusing. Thanks.

• javascript
• gif

• On which browser(s) do you observe this behavior? – maerics Commented Feb 17, 2012 at 22:49
• I assume you also don't want to simply remove the first gif before adding the new one? – Charlie G Commented Feb 17, 2012 at 22:55
• Have you tried to access img-element through images-collection? function changE(x) {var image=document.images[x]; image.src="animated.gif"; } – Teemu Commented Feb 17, 2012 at 22:56
• @maerics All of them as far as I know – Nikki Commented Feb 17, 2012 at 23:31
• @Teemu Makes no difference but Ingenu's answer seems to work (see below) – Nikki Commented Feb 17, 2012 at 23:32

2 Answers 2

Once an image is loaded in memory, all other objects that request that image, using the same URL, get a reference to the image from the browser cache. This avoids loading the same image multiple times. In the case of a gif, one of the meta data to be kept track of is the current frame, which is stored not at the <img> dom element, but rather at the browser level in the structure it uses to store that gif.

On load, that frame index is reset. So, while the browser is processing the gif loop, a second image loading sets the current frame index to the beginning, hence both images synchronize.

This is a browser implementation, and it seems most browsers follow this implementation. One advantage to this is that if you have thousands of little gifs (from the same URL) in one page, the browser would do a lot less putation to render them, because it would only change one frame index, not thousands.

Edit: To fix your code you'd 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();
}

So the browser thinks this is a different image (i.e. different URL).

Try using a solution like so:

<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 a clicke event for each image with the calss name animate and the click event will only effect the specific image clicked.