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