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

Question

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

到目前为止我尝试过的方法:

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

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

3. 我遵循了代码:Stopping GIF Animation Programmatically它使用 Canvas 将静态图像绘制到加载图像上。因此，基本上“loading.gif”仍在屏幕上显示的静态图像后面播放，这将消耗更多的CPU周期。

4. 我尝试使用CSS属性“animation-play-state:paused”和“animation-play-state:running”分别停止和播放gif。但后来我发现 CSS 动画属性仅适用于帧或图像，不适用于 gif。
5. 我发现人们在 jquery 代码中使用了一个属性“animate:false”。有没有办法在 javascript 中使用该属性？我不想在代码中使用 jquery。

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

Answer 1

你尝试过 libgif-js 吗？

https://github.com/buzzfeed/libgif-js是一个相当流行的javascript gif播放器，带有进度条和暂停功能。纯 JavaScript，35kb。这可能会给您提供线索，甚至实现您的目标。