Gifs、Javascript和多个实例

Gifs, Javascript and Multiple Instances

本文关键字：实例 Javascript Gifs      更新时间：2023-09-26

也许这是一个愚蠢的问题，但无论如何都是这样。

示例：假设我有一个非循环动画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，并有两个单独的文件可以使用，我知道精灵表，但我很好奇，如果我可以使用gif的一个副本，并在一个页面上多次使用它，而每次另一个img元素收到与其src相同的文件时，都不会重新启动gif的所有实例？

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

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

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

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

编辑：要修复你的代码，你必须在图像的末尾添加一些随机的东西。

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

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

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

<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的图像设置一个点击事件，并且点击事件只影响所点击的特定图像。

相关文章：