仅限 Firefox/IE - 在元素 show() jquery 之后冻结的 gif 动画答案

【问题标题】：Firefox/IE only - gif animation frozen after element show() jquery仅限 Firefox/IE - 在元素 show() jquery 之后冻结的 gif 动画
【发布时间】：2012-06-26 07:42:20
【问题描述】：

我有一个隐藏 div 中包含 gif 动画的页面。单击 div show()s 但动画卡在第一帧上。我尝试了一些修复，但似乎没有任何效果。我曾尝试在单击、重新聚焦等时动态插入图像，但无济于事。

要查看示例，请转到http://staging.trulioo.com 并使用顶部的语言选择器选择不同的语言。应出现“翻译”一词和动画图像。除了 IE 和 Firefox (wtf?) 之外，该动画在所有其他浏览器中都有效...

【问题讨论】：

动画应该是什么？
@Fresheyeball 小“圆圈/箭头”的东西 - 问题似乎是 Firefox 对在即将被 HTTP 请求的结果覆盖的页面上执行动画不感兴趣。
@Fresheyeball 左到语言“选择”你会看到一个文本 Translating 和一个 loading gif
请将其添加到您的问题中。它的关键。
也许你可以让“切换语言”按钮的“点击”处理程序显示隐藏的<div>，然后在“点击”几毫秒后从超时处理程序开始重新加载页面。

标签： javascript jquery animation gif

【解决方案1】：

尝试在构建 DOM 时初始显示元素。也许使用 css 将其移出页面，然后在需要时将其放回应有的位置。或者可以使用不透明度来隐藏它，无论哪种方式都确保元素在页面加载时显示。

来源 - http://www.norio.be/blog/2008/09/animated-gif-not-working-internet-explorer

【讨论】：

@JamesHuckabone 你能提供一个小提琴你是如何尝试的吗？一个简化的例子，我相信我们可以让它工作
这里有同样的问题。我认为它没有解决方案，这是 Firefox 呈现 GIF 图像的方式所固有的。它在其他浏览器中也能正常工作。
我之前也遇到过这个问题，不用额外的js就解决了。

【解决方案2】：

尝试了几种解决方案，我无法让它发挥作用。我的最终解决方案是在 spin.js 中从 gif 动画切换到 JavaScript 解决方案。效果很好！！

http://fgnass.github.com/spin.js/

【讨论】：

（晚会）我一直在使用 spin.js 来解决这个问题，直到找出真正的问题。请参阅此处如何在所有浏览器上继续使用 spinner.gif 动画。 stackoverflow.com/questions/10521382/…