CODEWITHSUNDEEP
javascriptjquerycssanimated-gif
Erfan Ebrahimnia
Erfan Ebrahimnia

Reputation: 262

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.

Upvotes: 22

Views: 31018

Answers (10)

Shogo
Shogo

Reputation: 132

I had a similar problem and I solved it by adjusting the image's display attribute before restarting the gif. Also, set the timeout to make sure that the restarting the gif will run after the image attribute is changed.

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

This is inspired by this answer.

Upvotes: 1

Kelvin Chan
Kelvin Chan

Reputation: 1

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

Upvotes: 0

kiss_von
kiss_von

Reputation: 151

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

// Example:

restartGif("gif_box")

Upvotes: 2

Simon
Simon

Reputation: 1374

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/

Upvotes: -1

Sai Dubbaka
Sai Dubbaka

Reputation: 621

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

Upvotes: 9

prakashapkota
prakashapkota

Reputation: 321

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

Upvotes: -1

Adassko
Adassko

Reputation: 5343

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

Upvotes: 7

Aircraft5
Aircraft5

Reputation: 177

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

Upvotes: -2

Rohan Kumar
Rohan Kumar

Reputation: 40639

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

Upvotes: -1

joostmakaay
joostmakaay

Reputation: 437

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
}

Upvotes: -1

Related Questions