更新HTML中img标签src属性导致新旧图片重叠问题求助

问题原因 #

窗口聚焦时浏览器的渲染优化策略，加上未正确处理图片加载时序和ObjectURL的释放，导致新旧图片渲染重叠。

具体解决步骤 #

1. 释放旧的ObjectURL #

每次替换新图片前，调用URL.revokeObjectURL()释放之前的URL对象，既能清理内存，也能触发浏览器重新渲染img标签。

2. 预加载新图片再替换 #

通过创建临时Image对象预加载新图片，等加载完成后再替换到DOM中的img标签，避免新旧图片的渲染时序冲突。

3. 给img标签设置固定尺寸 #

给img标签添加固定的width和height样式，防止图片尺寸变化导致的布局抖动，进一步避免重叠。

修改后的代码示例 #

<!-- 给img标签设置固定尺寸 -->
<img id="img" style="width: 640px; height: 480px;" />

<script>
socket.onmessage = function (event) {
    const imgElement = document.getElementById('img');
    const newBlob = event.data;
    const newImgUrl = URL.createObjectURL(newBlob);

    // 创建临时图片预加载
    const tempImg = new Image();
    tempImg.onload = function() {
        // 释放旧的URL
        if (imgElement.src) {
            URL.revokeObjectURL(imgElement.src);
        }
        // 替换为新图片
        imgElement.src = newImgUrl;
    };
    tempImg.src = newImgUrl;
};
</script>

额外优化（若仍有重叠） #

可以在替换前先清空img的src，并加短暂延迟确保渲染更新：

tempImg.onload = function() {
    if (imgElement.src) {
        URL.revokeObjectURL(imgElement.src);
    }
    imgElement.src = ''; // 先清空当前图片
    setTimeout(() => {
        imgElement.src = newImgUrl;
    }, 10); // 短暂延迟保证渲染上下文更新
};

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