Restart a gif animation without reloading the file

Question

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.

A GIF *usually* loops infinitely (or you can make it that way via photo editing software, e.g. Photoshop), what do you mean `restart a gif animation` ? — BrownEyes, Nov 07 '13 at 08:48
Why don't you amend the GIF file in an editor to make it loop? Much easier than messing with the element in JS every x seconds — Rory McCrossan, Nov 07 '13 at 08:48
@Scorpion looping is an option which can be enabled/disabled on GIF files when saving them. It sounds like OPs GIF has this disabled. — Rory McCrossan, Nov 07 '13 at 08:48
see http://stackoverflow.com/questions/6991904/why-the-gif-animation-only-play-one-time-in-jquery — Emmanuel Gleizer, Nov 07 '13 at 08:50
@Scorpion : the OP never said he wants to loop the gif animation. I have the same requirement where 1) I made a gif that does NOT loop, on purpose 2) I want to start the animation when the user clicks on a button. The animation should then play only once and does not loop. — Fabien Quatravaux, May 06 '16 at 08:58

score 9 · Accepted Answer · edited Mar 03 '16 at 23:43

9

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

edited Mar 03 '16 at 23:43

Félix Adriyel Gagnon-Grenier

8,422
10
52
65

answered Jul 17 '14 at 17:47

Sai Dubbaka

621
7
11

My above answer will not reload the Image again. So I guess it suits your requirements. – Sai Dubbaka Jul 17 '14 at 17:50
Now 2021 - I used the above and it works fine on normal screens, but doesnt seem to on a mobile. On a mobile - if I wait a couple of minute it DOES restart the animation, but not if refresh immediately. Can someone confirm/negate this behaviour please. Is there technology on mobiles that effect this? – user801347 Mar 26 '21 at 14:15

score 7 · Answer 2 · answered Nov 07 '13 at 09:10

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

score 2 · Answer 3 · answered Oct 21 '19 at 07:46

2

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

// Example:

restartGif("gif_box")

answered Oct 21 '19 at 07:46

kiss_von

151
1
4

score 1 · Answer 4 · answered Mar 03 '21 at 20:24

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.

score 0 · Answer 5 · answered Jan 17 '20 at 08:33

0

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

answered Jan 17 '20 at 08:33

Kelvin Chan

1

4

Please a bit of explanation to your answer – Lucifer Jan 17 '20 at 08:51

joostmakaay · Answer 6 · 2013-11-07T08:54:07.103

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

edited Nov 07 '13 at 08:54

answered Nov 07 '13 at 08:46

joostmakaay

437
2
7
14

AJAX request? For what? There isn't even AJAX in your example code ^^ – pdu Nov 07 '13 at 09:00
Thats why i said 'even with javascript it would be possible', ajax could just reload the div. But is would be a bit odd to use Jquery only for a div refresh. – joostmakaay Nov 07 '13 at 09:01
No, I meant: Why use AJAX to "refresh" a gif? The gif is already there, no need to fetch data again from a server. Besides, AJAX is javascript, so your sentence does not make much sense. – pdu Nov 07 '13 at 09:04
Hmm yep, that makes more sense. Didn't know ajax always would fetch form db again. – joostmakaay Nov 07 '13 at 09:10
@joostmakaay this was actually the easiest answer to implement btw (4 years later), and it's not TOO hacky, ignore the haters :) – Robert Pounder Nov 01 '17 at 12:26
OP wanted to restart the GIF at will, not when it would naturally loop. – Sinus the Tentacular Feb 19 '20 at 21:50

score -1 · Answer 7 · answered Nov 07 '13 at 08:55

-1

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

answered Nov 07 '13 at 08:55

Rohan Kumar

40,431
11
76
106

6

wouldn't it reload the file again? – Dilip Oct 27 '15 at 09:27

score -1 · Answer 8 · answered Nov 07 '13 at 10:32

-1

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

answered Nov 07 '13 at 10:32

prakashapkota

321
2
6

6

This will reload the image from the server. I want a method to prevent this behaviour – Erfan Ebrahimnia Nov 07 '13 at 11:02

Simon · Answer 9 · 2018-10-22T12:41:09.393

-1

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/

edited Oct 22 '18 at 12:41

answered Nov 08 '13 at 22:09

Simon

1,314
4
14
26

score -2 · Answer 10 · answered Nov 07 '13 at 08:59

-2

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

answered Nov 07 '13 at 08:59

Aircraft5

177
1
1
13

Restart a gif animation without reloading the file

10 Answers10

Linked