Gifs、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 的一个副本并在一个页面上多次使用它而不每次另一个 img 元素收到与其 src 相同的文件时，所有 gif 实例都会重新启动？

希望这不会令人困惑。谢谢。

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

这将为每个名称为animate的图像设置一个clicke事件，并且click事件只会影响点击的特定图像。