Restart a gif animation without reloading the file

问题

Is it possible to restart a gif animation without downloading the file every time? My current code looks like this:

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

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

Edit

When I insert the gif into the dom it didn't restart the gif animation. I can only achieve this by appending a random string to the image src but this will download the image again.

I want to know if it is possible to restart the gif animation without downloading the gif.

回答1:

I've had similar requirement.

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

回答2:

for example on facebook - animated emoticons are not .gifs but a set of static frames on png file with dynamically set background offset. This way you have full control over your animation from javascript - you can even pause/unpause it or change its speed.

It's possible to split your .gif file into separate frames and generate a .png file on server side dynamically.

This looks like a good weekend project for me ;)

回答3:

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

// Example:

restartGif("gif_box")

回答4:

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
}

回答5:

This may help you,

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

回答6:

create a function in javascript and then reput the image in the same place. when you want to replay the Gif call this function.

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

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

回答7:

The simplest javascript solution:

Function:

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

Call function:

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

Example: http://jsfiddle.net/nv3dkscr/

回答8:

Try to set the src of the gif animation to itself or set it to an empty string followed by the original src again. ;)

来源：https://stackoverflow.com/questions/19831319/restart-a-gif-animation-without-reloading-the-file

标签

javascript

jquery

css

animated-gif