在 Google Chrome 中更改 GIF 图片 src 会使图片卡顿

Posted 2023-03-25

【中文标题】在 Google Chrome 中更改 GIF 图片 src 会使图片卡顿

【英文标题】：Changing GIF image src in Google Chrome makes the image stutter

【发布时间】：2019-09-30 04:20:38

【问题描述】：

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

我正在编写正确的代码，但在谷歌浏览器中它有一个奇怪的显示问题，看看这个减慢的记录作为演示：

如您所见，第一个 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 中发生，我尝试过的事情：

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

如果可能，我希望通过使用解决方法来避免 Chrome 中出现此问题。

【参考方案1】：

您是否尝试重新加载谷歌浏览器页面？ 在前端使用脚本时，需要一些时间硬重新加载。 谢谢。