在Google Chrome中更改GIF图像src会使图像变得混乱

Question

我正在编写jQuery代码，以使用img在不同的时间更改setTimeout的src属性。

我正在编写正确的代码，但是在Google Chrome浏览器中出现了一个奇怪的显示问题，请看一下这种放慢了录制速度的演示：

如您所见，第一个gif会重置并播放一小段时间，然后再更改为第二个gif，此问题可以通过以下代码重现：

    $("#TestImg").attr("src", "https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif");

    setTimeout(function () {
        $("#TestImg").attr("src", "https://media4.giphy.com/avatars/Kool-Aid/vBEBR9AYEYqq.gif");
    }, 1000);

    setTimeout(function () {
        $("#TestImg").attr("src", "https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif");
    }, 2500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="TestImg" />

它在Microsoft Edge浏览器中正确显示，这只是在Google Chrome中发生，我已经尝试过：

• 预加载图像
• 在更改img时隐藏/显示或添加/删除src

我希望通过使用变通办法来避免在Chrome中出现此问题。

Answer 1

您是否尝试重新加载Google Chrome浏览器页面？ 在前端使用脚本时，需要一段时间进行硬重装。 谢谢。