Question

是否可以在不下载文件的情况下重新启动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://i73.photobucket.com/albums/i231/charma13/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

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

// Example:

restartGif("gif_box")

Answer 4

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

<NumberPicker
        android:id="@+id/numer_picker"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="50dp"
        android:solidColor="#2E1E91" />

Answer 6

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

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

这是受this answer的启发。

Answer 7

这可能会对你有帮助，

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 8

在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 9

最简单的JavaScript解决方案：

功能：

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

通话功能：

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

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

Answer 10

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

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

10 个答案: