在网页上制作 GIF 动画 - 有什么方法可以重新启动它们？答案

【问题标题】：Animating GIFs on a web page - Any way to restart them?在网页上制作 GIF 动画 - 有什么方法可以重新启动它们？
【发布时间】：2012-02-08 02:14:18
【问题描述】：

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

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

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

我已经设置了一个 jsFiddle 来演示我的问题：jsfiddle.net/xJveS/4/

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

更新

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

【问题讨论】：

也许您可以尝试重置图像的 src 属性。如果它已预加载，则不必再次 d/l 并重置它可能会回收 gif 动画。
您总是可以将您的 gif 设置为精灵并将其设置为 div 背景图像，并且在精灵中将帧直接放在彼此下方，然后只需使用 jquery 调整背景图像 y 轴。这样你就可以控制动画的速度，做回调等等......
@ChristopherJohnson 这不是我在 jsfiddle 中所做的吗？还是我误解了你的意思？
@codewombat，这是个不错的主意，但该系统供不了解如何构建精灵表的客户使用（但了解如何构建动画 GIF，去看看） .我正在考虑自己进行一些服务器端处理以将动画转换为 spritesheet，但我不想这样做。
@death_au 我不知道你在用你的 jsfiddle 做什么......当我点击你的链接时我得到一个 404。

标签： javascript preloader animated-gif

【解决方案1】：

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

【讨论】：

我认为这就是 PxLoader 的用途。它应该预加载我的图像，以便图像立即显示。但是，我还是尝试了它，它在 IE 中运行良好。然后我尝试使用 javascript Image 对象来做同样的事情（不把它放在隐藏的 div 中），它也在 IE 中工作。然后我意识到我已经构建了自己的基本预加载器，它工作正常，所以它一定是特定于 PxLoader 的东西导致了这个问题......简而言之：感谢你的回答，我得到了它的工作，但你的答案不是答案。

【解决方案2】：

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

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

$('#myImg').attr('src', $('#myImg').attr('src') + '?' + (new Date()).valueOf());

缺点是它会在重新启动之前强制重新下载 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();
  });
});

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

【讨论】：