20

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

4

10 回答 10

9

我也有类似的要求。

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;
}
于 2014-07-17T17:47:49.500 回答
6

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

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

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

于 2013-11-07T09:10:29.130 回答
2 
restartGif(imgElement){ 
  let element = document.getElementById(imgElement);
  if (element) {
     var imgSrc = element.src;
     element.src = imgSrc; 
  }
}

// Example:

restartGif("gif_box")
于 2019-10-21T07:46:30.680 回答
0 
function refreshgif() {
  var giffile = $(".gif-class");
  giffile.src = giffile.src;
}
于 2020-01-17T08:33:02.373 回答
0

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

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

这是受这个答案的启发。

于 2021-03-03T20:24:10.420 回答
-1

Just make it loop forever? otherwise you could use an ajax request every (duration of gif) to restart it.

even with javascript it would be possible;

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
}
于 2013-11-07T08:46:59.023 回答
-1

最简单的javascript解决方案：

功能：

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

调用函数：

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

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

于 2013-11-08T22:09:33.863 回答
-1

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

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

   $('#id').css('background-image', 'url("' + img.src + '?x=' + Date.now() + '")' );
}
于 2013-11-07T10:32:27.927 回答
-1

这可能会帮助你，

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);
于 2013-11-07T08:55:43.043 回答
-2

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

于 2013-11-07T08:59:13.043 回答