Javascript 在网页上设置GIF动画-有没有办法重新启动它们？

我有以下场景：
我的网站的一个特定部分有一个800x600的部分，该部分有一个背景图像和叠加在顶部的多个其他图像（使用位置：绝对）。单击其中一个图像时，图像将与动画GIF进行交换，使其看起来好像发生了什么。这些动画通常运行一次（不循环）。
在预定义的“动画持续时间”后，动画GIF将切换回原始静态图像

这一切都很好，除了我无法知道下载动画GIF需要多长时间，这就引入了点击项目的可能性，在整个动画持续时间内似乎什么都没有发生。
这个问题的解决方案非常简单：预加载图像。事实上，我正在使用预加载我需要的所有图像

然而，这在一些浏览器中引入了一个新问题：动画只播放一次，以后再也不会播放。在Firefox中，它似乎工作正常（单击，动画播放。再次单击，动画播放）。但是在IE中，它似乎不起作用（单击，它会显示动画的最后一帧）

我已经设置了一个JSFIDLE来演示我的问题：

我有什么选择？下次显示GIF时，如何“重置”GIF以再次播放

更新

---

我最终构建了自己的（非常基本的）预加载程序类来替换动画GIF的PxLoader，并且它不会遇到问题。当我点击GIF时，它们可以很好地重放。这意味着我的整个问题是PxLoader特有的。目前，我的问题已经通过使用我自己的加载程序“解决”，但PxLoader仍然存在一个需要解决的问题。

为什么不将GIF加载到一个隐藏的div中，然后在需要时在目标位置为其添加标记呢。浏览器将缓存第一个请求中的GIF，因此它应该立即显示。

为什么不将GIF加载到隐藏的div中，然后在需要时在目标位置为其添加标记。浏览器将从第一个请求中缓存它，因此它应该立即显示。

AFAIK，无法从JavaScript重新启动.gif

您应该能够通过将src设置为末尾带有查询字符串的相同内容来重新加载它。（对不起，我使用jQuery是为了节省时间，哈哈）

不利的一面是，它会迫使gif在重新启动之前再次下载。因此，接下来要做的是实现某种预加载程序，从新的src预加载替换的gif

var rplImg;
function preloadReplacement() {
 rplImg = new Image();
 var d = new Date();
 rplImg.src = "some.gif?" + d.valueOf();
}
$(function()  {
  preloadReplacement();
  $('#myImg').click(function(){ 
      $(this).attr('src', rplImg.src);
      preloadReplacement();
  });
});

---

这是未经测试的，但这是基本思想。

好吧，没有办法从JavaScript重新启动.gif

您应该能够通过将src设置为末尾带有查询字符串的相同内容来重新加载它。（对不起，我使用jQuery是为了节省时间，哈哈）

不利的一面是，它会迫使gif在重新启动之前再次下载。因此，接下来要做的是实现某种预加载程序，从新的src预加载替换的gif

var rplImg;
function preloadReplacement() {
 rplImg = new Image();
 var d = new Date();
 rplImg.src = "some.gif?" + d.valueOf();
}
$(function()  {
  preloadReplacement();
  $('#myImg').click(function(){ 
      $(this).attr('src', rplImg.src);
      preloadReplacement();
  });
});

---

这是未经测试的，但这是基本想法。

也许您可以尝试重置图像的src属性。如果已预加载，则无需再次d/l，重置它可能会回收gif动画。您可以始终将gif设置为精灵，并将其设置为div背景图像，精灵中的帧直接位于彼此下方，然后使用jquery调整背景图像的y轴。通过这种方式，您可以控制动画的速度，执行回调等…@ChristopherJohnson这不是我在JSFIDLE中所做的吗？还是我误解了你的意思？@codewombat，这是一个不错的主意，但该系统将被那些不了解如何制作精灵表（但确实了解如何制作动画GIF，见图）的客户使用。我想自己做一些服务器端处理来将动画转换成精灵表，但我不想这么做。@death\u au我不知道你在用你的JSFIDLE做什么……当我点击你的链接时，我得到一个404。也许你可以试着重置图像的src属性。如果已预加载，则无需再次d/l，重置它可能会回收gif动画。您可以始终将gif设置为精灵，并将其设置为div背景图像，精灵中的帧直接位于彼此下方，然后使用jquery调整背景图像的y轴。通过这种方式，您可以控制动画的速度，执行回调等…@ChristopherJohnson这不是我在JSFIDLE中所做的吗？还是我误解了你的意思？@codewombat，这是一个不错的主意，但该系统将被那些不了解如何制作精灵表（但确实了解如何制作动画GIF，见图）的客户使用。我想自己做一些服务器端处理来将动画转换成精灵表，但我宁愿不这样做。@death\u au我不知道你在用你的JSFIDLE做什么……当我点击你的链接时，我得到一个404。我想这就是PxLoader的用途。它应该预加载我的图像，以便图像立即显示。然而，我还是尝试了，它在IE中工作得很好。然后我尝试使用javascript图像对象做同样的事情（不把它放在隐藏的div中），它在IE中也工作得很好。然后我意识到我已经构建了自己的基本预加载程序，它工作得很好，所以它一定是特定于PxLoader的东西导致了这个问题。。。简言之：多亏了你的回答，我才让它工作起来，但你的答案不是答案。我想这就是PxLoader的用途。它应该预加载我的图像，以便图像立即显示。然而，我还是尝试了，它在IE中工作得很好。然后我尝试使用javascript图像对象做同样的事情（不把它放在隐藏的div中），它在IE中也工作得很好。然后我意识到我已经构建了自己的基本预加载程序，它工作得很好，所以它必须是特定于