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

Question

我想制作一个有2个按钮的网页...点击按钮1，＆＃34; loading.gif＆＃34;播放和点击按钮2，它停止但图像仍然显示。我希望这些活动具有CPU效率，即它们应该消耗更少的CPU周期。

到目前为止我尝试的方式：

1. 我从＆＃34; loading.gif＆＃34;中捕获了一张静止图像，然后点击按钮2，我将img.src属性更改为＆＃34; still.gif＆＃34;。

2. 我分了＃34; loading.gif＆＃34;使用在线工具进入单个框架。在点击按钮1时，我手动调用帧，定时器设置为100毫秒（即我手动完成动画）。并且，在单击按钮2时，我使用clearTimeout（）清除了计时器。

3. 我遵循了代码：Stopping GIF Animation Programmatically 它使用画布将静止图像绘制到加载图像上。所以，基本上＆＃34; loading.gif＆＃34;仍然在屏幕上显示的静止图像后面播放，这将消耗更多的CPU周期。

4. 我尝试使用CSS属性＆＃34;动画播放状态：暂停＆＃34;和＆＃34;动画播放状态：跑步＆＃34;分别停止和播放GIF。但后来我发现CSS动画属性只适用于帧或图像，而不适用于GIF。
5. 我找到了一个属性＆＃34; animate：false＆＃34;人们在jquery codes.Is有什么方法在javascript中使用该属性？ 我不想在我的代码中使用jquery。

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

Answer 1

您尝试过libgif-js吗？

https://github.com/buzzfeed/libgif-js是一款非常受欢迎的javascript gif播放器，具有进度条和暂停功能。纯javascript，35kb。 这可能会为您提供线索，甚至可以实现您的目标。