如何在 javascript (vanilla) 中重放动画 GIF - 没有 JQuery答案

【问题标题】：How to replay an animated GIF in javascript (vanilla) - Without JQuery如何在 javascript (vanilla) 中重放动画 GIF - 没有 JQuery
【发布时间】：2020-10-16 01:08:40
【问题描述】：

我当前的问题是，我的基于 Web 的应用程序上有一个加载栏动画，当整个页面或特定内容加载时（显然）会显示该动画。它应该看起来像三星电视应用程序之一，因此需要在 UX 上进行完善。

我和我的团队现在正在做的是为它创建一个元素和我认为它被缓存在本地设备中的混合，这是一个问题。我知道有几种方法可以解决这个问题，比如在 src url 的末尾添加一个 Math.random() 查询，但我现在不想遵循这条路线。

我还看到了一种我认为只需将element.src = 'theSameUrl.gif' URL 设置为相同的方法，我假设强制设备重新加载文件而不是使用缓存的文件。

我也愿意尝试新的文件类型，这可以使这更容易，但我必须记住，这个应用程序可以在很多不同的硬件上运行，从三星电视到 BT 盒子甚至 Virgin Media 电视盒子, amazon firestick 等。

此时我会采取任何措施：P

【问题讨论】：

看here。希望对你有帮助。
不幸的是，这不是我想要的，gif 已经在循环播放了。我想要的是它在所有时间都可见时重新启动

标签： javascript html gif reload

【解决方案1】：

您可以通过擦除它来“强制”重新加载源：img.src = ""
然后你再设置一次：img.src = "your_src_path"

这样你的 .gif 将从零开始，至少在 Edge、Chrome 和 Firefox 上，它应该在电视上以相同的方式工作。

【讨论】：

啊，我知道这似乎是唯一的可能性。你知道这是从缓存中重新加载还是重新下载？
它从缓存中重新加载。在这种情况下，HTTP 响应状态应该是304 Not Modified。当您获得该响应状态时，即使是网络传输的总数据（字节）也不会增加。
很好，生病的人，谢谢，这非常有帮助。我的团队决定不继续重新启动 gif，因为它已经花费了太多时间，并且该项目为此有一些冗余。但我会牢记这一点，以备将来欢呼！