重新启动 gif 动画而不重新加载文件

Posted 2023-02-16

【中文标题】重新启动 gif 动画而不重新加载文件

【英文标题】：Restart a gif animation without reloading the file

【发布时间】：2013-11-18 19:48:55

【问题描述】：

是否可以在不每次下载文件的情况下重新启动 gif 动画？ 我当前的代码如下所示：

var img = new Image();
img.src = 'imgages/src/myImage.gif';

$('#id').css('background-image', 'url("' + img.src + '?x=' + Date.now() + '")' );

编辑

当我将 gif 插入 dom 时，它没有重新启动 gif 动画。我只能通过将随机字符串附加到图像 src 来实现这一点，但这将再次下载图像。

我想知道是否可以在不下载gif的情况下重新启动gif动画。

【问题讨论】：

resetting gif animation 是什么意思？

GIF通常无限循环（或者你可以通过照片编辑软件，例如 Photoshop 来实现），restart a gif animation 是什么意思？

为什么不在编辑器中修改 GIF 文件以使其循环播放？比每 x 秒在 JS 中弄乱元素要容易得多

@Scorpion 循环是一个可以在保存 GIF 文件时启用/禁用的选项。听起来 OPs GIF 已禁用此功能。

@Scorpion ：OP 从未说过他想循环播放 gif 动画。我有同样的要求：1）我故意制作了一个不循环的 gif 2）我想在用户单击按钮时开始动画。然后动画应该只播放一次并且不会循环播放。

【参考方案1】：

让它永远循环？否则，您可以每隔（gif 持续时间）使用一个 ajax 请求来重新启动它。

即使使用 javascript 也是可能的；

var gif
window.onload=function () 
  gif=document.getElementById('id')
  setInterval(function () 
    gif.src=gif.src.replace(/\?.*/,function () 
      return '?'+new Date()
    )
  ,5000)//duration of your gif

【讨论】：

AJAX 请求？为了什么？您的示例代码中甚至没有 AJAX ^^

这就是为什么我说'即使使用 javascript 也是可能的'，ajax 可以重新加载 div。但是仅将 Jquery 用于 div 刷新会有点奇怪。

不，我的意思是：为什么要使用 AJAX 来“刷新”一个 gif？ gif 已经存在，无需再次从服务器获取数据。此外，AJAX 是 javascript，所以你的句子没有多大意义。

嗯，是的，这更有意义。不知道 ajax 总是会再次获取表单 db。

@joostmakaay 这实际上是实现顺便说一句（4 年后）最简单的答案，而且它不是太 hacky，忽略仇恨者 :)

【参考方案2】：

这可能对你有帮助，

var img = new Image();
src = 'imgages/src/myImage.gif';
img.src=src;
$('body').append(img);
setInterval(function()
    t=new Date().getTime();
    $("img").attr("src", src+'?'+t);
,5000);

【讨论】：

不会重新加载文件吗？

【参考方案3】：

尝试将 gif 动画的 src 设置为自身或将其设置为空字符串，然后再次设置原始 src。 ;)

【参考方案4】：

例如在 facebook 上 - 动画表情不是 .gif 文件，而是 png 文件上的一组静态帧，具有动态设置的背景偏移。这样您就可以从 javascript 完全控制动画 - 您甚至可以暂停/取消暂停或更改其速度。

可以将您的 .gif 文件拆分为单独的帧并在服务器端动态生成一个 .png 文件。

这对我来说似乎是一个不错的周末项目；）

【参考方案5】：

在 javascript 中创建一个函数，然后将图像放在同一个地方。当你想重放 Gif 时调用这个函数。

function replayGif()
   var img = new Image();
   img.src = 'imgages/src/myImage.gif';

   $('#id').css('background-image', 'url("' + img.src + '?x=' + Date.now() + '")' );

【讨论】：

这将从服务器重新加载图像。我想要一种方法来防止这种行为

【参考方案6】：

最简单的javascript解决方案：

功能：

function restartGif(ImageSelector)
  var imgSrc=document.querySelector(ImageSelector).src;
  document.querySelector(ImageSelector).src=imgSrc;

调用函数：

restartGif(SELECTOR) // Example: restartGif('.homer')

示例：http://jsfiddle.net/nv3dkscr/

【参考方案7】：

我也有类似的要求。

var img = document.createElement("img"),
    imageUrl = "http://i73.photobucket.com/albums/i231/charma13/love240.gif";
img.src = imageUrl;
document.body.appendChild(img);

window.restartAnim = function () 
    img.src = "";
    img.src = imageUrl;

【讨论】：

我上面的答案不会再次重新加载图像。所以我想它适合你的要求。

现在 2021 年 - 我使用了上述方法，它在普通屏幕上运行良好，但在移动设备上似乎不行。在移动设备上 - 如果我等待几分钟，它会重新启动动画，但如果立即刷新则不会。有人可以确认/否定这种行为吗？手机上是否有技术可以实现这一点？

【参考方案8】：

restartGif(imgElement) 
  let element = document.getElementById(imgElement);
  if (element) 
     var imgSrc = element.src;
     element.src = imgSrc; 
  


// Example:

restartGif("gif_box")

【参考方案9】：

function refreshgif() 
  var giffile = $(".gif-class");
  giffile.src = giffile.src;

【讨论】：

请对你的回答稍加解释

【参考方案10】：

我遇到了类似的问题，我通过在重新启动 gif 之前调整图像的 display 属性来解决它。此外，设置超时以确保在图像属性更改后重新启动 gif。

const img = document.getElementById("gif");
img.style = "display: none;";
img.style = "display: block;";
setTimeout(() => 
  img.src = img.src;
, 0);

这是受到this answer的启发。