javascript - 如何级联启动多个 gif？

Question

我有一个带有动画火焰的蜡烛的 gif。我的网页将连续显示其中一些 gif。如果页面加载后所有 gif 不是立即开始，那就更真实了(否则我会看到一行“同步”蜡烛)。

我可以创建多个具有不同火焰动画的 GIF，然后随机显示哪些 GIF，但这将占用额外的带宽并增加额外的复杂性。

有没有办法可以级联启动 gif？即在随机的时间后启动每个，以便它们不同步并且看起来更真实？

也许使用jquery？或者简单的 JavaScript？

非常感谢

Answer 1

你不能这么做。如果将同一张图像放置在多个位置，它看起来总是一样的。您可以编辑图像并更改 gif 中帧的顺序，保存并重复此操作几次，然后加载 gif，但这仅在图像已加载(缓存)到浏览器上时才有效。如果这是您第一次加载页面，则可能会恰好在另一个图像从加载图像的第一帧开始加载时加载图像，因此看起来好像它们是同步的。

您可以使用setTimeout加载图像，但是当用户第一次进入您的页面时，这会出现与上述相同的问题。您可以延迟加载文件的请求，但您无法控制文件下载的速度，因此无法控制第一帧何时开始播放。

如果我是你，我会尝试创建一个由不同图像组成的大 Sprite ，每个图像从不同的帧开始动画。只有一个请求，所有动画将一起播放，确保帧永远不同步。在网站上显示图像时，请确保仅正确显示每张图像所需的部分。这将为您提供随机时间燃烧火焰的效果。