Search code examples
javascripthtmlanimated-gif

Is there a way to make an animated gif play from the beginning?

I've got an animated gif which functions fine on its own. It's supposed to act as a transition between 2 pages (from level 1 to level 2). It is called by :

setTimeout(function () {
  window.location.href = "level1-2.html"; //redirect
  }, 3000);

The setTimeout is not the problem, I have the same problem without it. The only picture displayed is the last one of the gif. I don't want that gif to loop.

If I click "Reload", the animation plays. But I can't write "reload" in the code of the page or it will reload forever. I thought of setting a cookie and reloading only if it's unset, but I'm already using cookies for global variables and I'm reluctant to overdo it.

I found an answer online :

window.location.href = "level1-2.html" + "?a="+Math.random(); //redirect

To fool the browser into thinking it's a new url. But mine doesn't get fooled (Firefox).

Converting the animated gif into a video could maybe solve this, but it would make loading time longer, wouldn't it?

All sugestions welcome.

Solution

  • are you trying to modify the URL without reloading to "fool" the browser? if so, this may work:

    window.history.pushState( , , 'level1-2.html');

    it uses the History API