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

是否可以在不下载文件的情况下重新启动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。

Answer 1

我有类似的要求。

 var img = document.createElement("img"), imageUrl = "http://sofzh.miximages.com/javascript/love240.gif"; img.src = imageUrl; document.body.appendChild(img); window.restartAnim = function () { img.src = ""; img.src = imageUrl; } 

Answer 2

例如在Facebook上 – 动画表情符号不是.gifs，而是png文件上的一组静态帧，具有动态设置的背景偏移量。 这样你就可以通过javascript完全控制你的动画 – 你甚至可以暂停/取消它或改变它的速度。

可以将.gif文件拆分为单独的框架，并动态生成服务器端的.png文件。

这看起来对我来说是一个很好的周末项目;）

Answer 3

只是让它永远循环？ 否则你可以每次（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 } 

Answer 4

这可能对你有帮助，

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

Answer 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() + '")' ); } 

Answer 6

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

Answer 7

最简单的JavaScript解决方案：

function：

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

通话function：

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

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