Chrome扩展：修改单个img的GIF src时如何避免重启同src的其他GIF

问题描述 #

我正在开发一款Chrome扩展，实现鼠标悬停图片时切换其GIF资源的功能，代码如下：

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

其中gifOne.gif和gifTwo.gif是扩展内的本地文件。目前遇到的问题是：当多个img元素的src均为gifTwo.gif时，悬停其中一个元素切换到gifTwo.gif时，所有同src的其他GIF都会重启；鼠标离开切换回gifOne.gif时，所有src为gifOne.gif的其他GIF也会重启。

需要实现修改单个img元素的src时，不影响其他同src的GIF播放状态。

核心原因 #

浏览器会对相同URL的资源进行缓存，并且共享GIF的播放状态——所有指向同一个URL的img元素会复用同一个资源实例，所以修改其中一个的src（即使是设为相同URL）会触发所有实例重启播放。

解决方案 #

方法1：添加唯一查询参数 #

给每个img的GIF URL添加独有的查询参数，让浏览器认为是不同的资源，但实际指向同一个本地文件，这样每个img都会拥有独立的资源实例和播放状态。

修改代码如下：

// 给元素绑定唯一标识，用dataset存储随机ID
El.dataset.uniqueId = Math.random().toString(36).slice(2);

El.onmouseenter = ()=>{
    // 拼接带唯一参数的URL
    El.src = `${chrome.runtime.getURL('gifTwo.gif')}?id=${El.dataset.uniqueId}`
}
El.onmouseleave = ()=>{
    El.src = `${chrome.runtime.getURL('gifOne.gif')}?id=${El.dataset.uniqueId}`
}

Chrome扩展会忽略URL中的查询参数，正常加载本地GIF文件，但浏览器会将带不同参数的URL视为独立资源，从而实现每个img的播放状态隔离。

方法2：使用Blob URL隔离资源 #

提前将扩展内的GIF文件读取为Blob，为每个img生成独立的Blob URL，确保每个img的src都是唯一的，彻底隔离播放状态。

实现代码：

// 读取扩展内GIF文件为Blob
async function fetchGifAsBlob(gifFileName) {
    const res = await fetch(chrome.runtime.getURL(gifFileName));
    return res.blob();
}

// 初始化单个img元素的悬停切换逻辑
async function initHoverGif(El) {
    // 并行读取两个GIF的Blob
    const [gifOneBlob, gifTwoBlob] = await Promise.all([
        fetchGifAsBlob('gifOne.gif'),
        fetchGifAsBlob('gifTwo.gif')
    ]);

    // 生成唯一的Blob URL并存储到元素dataset中
    El.dataset.gifOneUrl = URL.createObjectURL(gifOneBlob);
    El.dataset.gifTwoUrl = URL.createObjectURL(gifTwoBlob);

    // 绑定悬停事件
    El.onmouseenter = () => {
        El.src = El.dataset.gifTwoUrl;
    };
    El.onmouseleave = () => {
        El.src = El.dataset.gifOneUrl;
    };

    // 页面卸载时释放Blob URL，避免内存泄漏
    window.addEventListener('unload', () => {
        URL.revokeObjectURL(El.dataset.gifOneUrl);
        URL.revokeObjectURL(El.dataset.gifTwoUrl);
    });
}

// 调用初始化函数处理目标元素
initHoverGif(El);

这种方法不会产生额外的网络请求，所有资源都是本地读取，且每个img的播放状态完全独立，适合对状态隔离要求较高的场景。

注意事项 #

• 方法1的查询参数可以使用元素的唯一ID、时间戳或随机字符串，只要保证每个img的参数唯一即可。
• 方法2必须在页面卸载时调用URL.revokeObjectURL释放Blob资源，防止内存泄漏。

内容的提问来源于stack exchange，提问作者Daniel Goldberg