缓存后，动画 GIF 在 FireFox 中无法工作
我有一个循环 3 次的 GIF 动画。我注意到在 Firefox 和 Chrome 中（没有检查其他），我可以查看 GIF 一次，然后如果我重新加载页面，缓存的 GIF 根本不是动画的。
有解决办法吗？我可以更改动画 GIF 的某些内容来防止这种情况发生吗？
I have an animated GIF that loops three times. I have noticed in Firefox and Chrome (haven't checked others) that I can view the GIF once and then if I reload the page, the cached GIF is not animated at all.
Is there a solution to this? Is there something about the animated GIF that I could change to prevent this from occurring?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
您能给我们指一下有问题的 GIF 吗？您使用的所有 GIF 都会出现这种情况吗？都是用同一个应用程序制作的？
无论如何，只是不缓存，瞧，解决了。但我认为您应该使用另一个应用程序来创建 GIF 并查看它是否正常工作。
Could you point us to the GIF in question? Does it happen with all GIFs you use? All made with the same application?
Anyway, just don't cache and voila, solved. But I think you should use another application to create your GIF and see if it works correctly.
在 Firefox 中，您可以强制完全重新加载（重新加载缓存）使用 Ctrl+Shift+R 或 Ctrl+F5。
在 Chrome 中，它是 Ctrl+F5 或 Shift+F5。
In Firefox, you can force a full reload (reload the cache) with Ctrl+Shift+R or Ctrl+F5.
In Chrome, it's Ctrl+F5 or Shift+F5.
这是一个超级丑陋的解决方案，但如果您内联调用图像，您可以使用它，虽然不漂亮，但它有效！
希望有帮助
Its a super ugly solution but you could use this if your calling the image inline, not pretty but it works!
hope that helps
在这种情况下，我选择的解决方案是将 GET 变量附加到图形名称的末尾，以防止页面刷新时从缓存中重新加载图形。
The solution I chose in this case was to append a GET variable to the end of the graphic name, preventing the graphic from being reloaded from cache when the page refreshes.
杰德·奥康纳的解决方案有效，但正如所说，这是一个丑陋的解决方案。
因为每次您访问该页面时都会从服务器下载图像。这会导致大图像的带宽问题。这也会增加页面加载时间，因此对于慢速连接来说是不利的。
有更好的解决方案吗？
我想出了这样的事情：
我在循环“永远”模式下重新生成了动画 gif。在我的 gif 中，有 20 帧，每一帧显示 150 毫秒。这样循环的一步持续 3 秒。我还创建了动画最后一帧的 jpeg 版本。
当页面加载时，我使用 window.setTimeout() 方法在 3 秒后用 jpeg 替换 gif。因为，我希望当循环的第一步完成时，最后一帧保持静止。但存在时间问题。当显示最后一帧时，动画会重新开始，然后我才能用 jpeg 替换 gif。有没有办法检测动画是否完成或重新启动？
Jade O'Connor's solution works but as said it's an ugly solution.
Because each time you visit the page the image is downloaded from the server. This leads to bandwith problems for large images. This also increases the page loading time, hence it's bad for slow connections.
Is there a better solution?
I figured out something like this:
I regenerated the animated gif in loop "forever" mode. In my gif, there were 20 frames and each one is shown for 150 ms. So that one step of the loop lasts for 3 seconds. I also created a jpeg version of the last frame of the animation.
When the page loads I used window.setTimeout() method for replacing the gif with the jpeg after 3 seconds. Because, I wanted the final frame stand still when the first step of the loop is finished. But there were timing problems. When the last frame is shown the animation restarts before I could replace the gif by the jpeg. Is there a way to detect if the animation is finished or restarted?