在网页上设置GIF动画-任何重新启动它们的方法

Animating GIFs on a web page - Any way to restart them?

本文关键字：重新启动 方法 任何 网页 设置 GIF 动画      更新时间：2023-09-26

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

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

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

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

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

更新

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

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

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();
  });
});

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

相关文章：