Javascript：将 img 元素的 .src 设置为 gif 也会重新启动 src 也是该 gif 的所有其他 img 的 gif。我该如何避免这种情况？

Question

所以我正在制作一个 chrome 扩展，其中涉及当用户将鼠标悬停在图像上时更改图像 gif src，如下所示：

El.onmouseenter = ()=>{
            El.src = chrome.runtime.getURL('gifTwo.gif')
}
El.onmouseleave = ()=>{
            El.src = chrome.runtime.getURL('gifOne.gif')
}

GifOne 和 Two 是扩展程序中的本地文件。问题是我有多个 img 元素，其 src 也是 gifTwo.gif。当我将鼠标悬停在该元素上时，它会按预期将 gif 更改为 gifTwo，但它还会重新启动 src 也是 gifTwo 的每个其他 img 元素的 gif。当用户鼠标离开图像时，它会再次按预期更改为 gifOne，但随后它会在 src 也是 gifOne 的每个其他图像元素上重新启动 gif

知道如何避免这种情况，以便设置一个 img 元素的 src 不会影响具有相同 src 的其他 img 元素的 gif 吗？

Answer 1

有一个简单的方法可以做到这一点：复制 GIF，并让每个图像使用自己的

<img name="im1" src="...">
<img name="im2" src="...">


El.onmouseenter = ()=>{
            El.src = chrome.runtime.getURL('gifTwo' + this.getAttribute("name").substring(2) + '.gif')
}
El.onmouseleave = ()=>{
            El.src = chrome.runtime.getURL('gifOne' + this.getAttribute("name").substring(2) + '.gif')
}

或者您可以花几天时间寻找更优雅的解决方案