GIF，Javascript和多个实例

Question

也许是一个愚蠢的问题，但无论如何都要进行

示例：假设我有一个非循环动画GIF，我有两个img元素。

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

所以我用一点javascript来改变slot1的来源。

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

someButtonGotClicked=changE('slot1'); 

工作正常。 Gif从头到尾播放，但如果我然后将slot2的src更改为相同的gif：

changE('slot2');  

slot1重置它的gif回到开始与slot2同步，启动它的gif。

现在我知道我可以复制gif并使用2个单独的文件，我知道精灵表但我很好奇如果我可以使用gif的一个副本并且在页面上多次使用它而没有所有实例每次重新启动gif时，另一个img元素会收到与src相同的文件吗？

希望不要混淆。 谢谢。

Answer 1

将图像加载到内存中后，使用相同URL请求该图像的所有其他对象将从浏览器缓存中获取对该图像的引用。 这可以避免多次加载相同的图像。 在gif的情况下，要跟踪的元数据之一是当前帧，其不存储在<img> dom元素处，而是存储在用于存储该gif的结构中的浏览器级别。

在加载时，该帧索引被重置。 因此，当浏览器正在处理gif循环时，第二个图像加载将当前帧索引设置为开头，因此两个图像同步。

这是一个浏览器实现，似乎大多数浏览器都遵循此实现。 这样做的一个优点是，如果你在一个页面中有成千上万的小GIF（来自同一个URL），浏览器可以做很少的计算来渲染它们，因为它只会改变一个帧索引，而不是数千个。

编辑：要修复代码，您必须在图像末尾添加随机内容。

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

因此浏览器认为这是一个不同的图像（即不同的URL）。

Answer 2

尝试使用这样的解决方案：

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

这将为每个图像设置一个clicke事件，其中calss名称为animate ，click事件将仅影响单击的特定图像。