如何使用javascript停止gif动画以防止高内存和cpu消耗

我想制作一个有两个按钮的网页…单击按钮1时，“loading.gif”播放，单击按钮2时，它停止，但图像仍然显示。我希望这些活动具有CPU效率，也就是说，它们应该消耗更少的CPU周期

到目前为止我已经尝试过的方法：

我从“loading.gif”中捕获了一幅静态图像，单击按钮2，我将img.src属性更改为“still.gif”

我使用一个在线工具将“loading.gif”分为单独的帧。单击按钮1，我手动调用帧，计时器设置为100毫秒（即，我手动制作动画）。单击按钮2，我使用clearTimeout（）清除了计时器

我遵循代码： 它使用画布将静止图像绘制到加载图像上。因此，基本上“loading.gif”仍在屏幕上显示的静止图像后面播放，这将消耗更多的CPU周期

我尝试使用CSS属性“动画播放状态：暂停”和“动画播放状态：运行”分别停止和播放gif。但后来我发现CSS动画属性只对帧或图像有效，而对GIF无效

我发现人们在jquery代码中使用了一个属性“animate:false”。有没有办法在javascript中使用该属性？ 我不想在代码中使用jquery

---

那么，有没有什么方法可以停止gif，而无需将gif转换为单独的帧，无需使用jquery，并且仍然保持CPU效率。

您尝试过libgif js吗

是一款非常流行的javascript gif播放器，具有进度条和暂停功能。纯javascript，35kb。

---

这可能会给你一些线索，甚至达到你的目标。

你试过libgif js吗

是一款非常流行的javascript gif播放器，具有进度条和暂停功能。纯javascript，35kb。 这可能会给你线索，甚至实现你的目标