How can I check to see if a gif animation has completed

Question

I'm making a page for a friend that has an animated gif when you click a link. clouds swoop in and the page redirects. When the page redirects the clouds (another gif) disperse. Due to caching issues I had to add a random ID to each instance of the gif thus slowing my site down.

I have my page redirect on a timer right now yet with poor internet the gif of clouds coming in is often is cutshort making it look really awkward when the page redirects and is covered in clouds. If needed I can link the page.

How can I check to see if my animation has finished before redirecting or taking other action?

To clarify, you want... to check if the gif animation has been completed? @_@ — Wesley Brian Lachenal, Sep 01 '14 at 04:53
possible duplicate of [Determine GIF Animation Status?](http://stackoverflow.com/questions/11063800/determine-gif-animation-status) — Wesley Brian Lachenal, Sep 01 '14 at 04:54
Or this one http://stackoverflow.com/questions/16139629/can-jquery-know-when-my-animated-gif-has-ended — Wesley Brian Lachenal, Sep 01 '14 at 04:55
this may help you. http://stackoverflow.com/questions/1326890/is-it-possible-to-detect-animated-gif-images-client-side — Khaleel, Sep 01 '14 at 04:56
There is no way to access the individual frames of an animated .GIF in javascript. But try solution provided in above link . — Khaleel, Sep 01 '14 at 04:57

Joel Sharin · Accepted Answer · 2014-09-01T05:00:18.987

3

I don't believe it is possible to use Javascript to determine when a gif has finished. One method you could use instead is have a long static image and have it slide to the right in a div that only shows a portion of it.

Ex. Imagine a div that is 10x10, with a 100x10 image inside it. You show one frame of the image at a time in the div, by moving the image with javascript

edited Sep 01 '14 at 05:00

answered Sep 01 '14 at 04:55

Joel Sharin

82
6

I'm failing to understand your idea – Erik B Sep 01 '14 at 04:58
nevermind... i understand. this is a more classic way to have a gif. so the animation would be one long strip of a frame by frame representation that slides across creating an animated effect? – Erik B Sep 01 '14 at 04:59
Right. I added a little bit more of an explanation – Joel Sharin Sep 01 '14 at 05:00
I'll definitely give this a go. Thanks for the elaboration – Erik B Sep 01 '14 at 05:03

score 0 · Answer 2 · answered Aug 25 '21 at 10:16

So I'm a bit late but I'm having a similar issue right now.

One solution can be to create a setTimeout if you know the length of the .gif file.

For example, I created a 7 second long .gif file in Adobe Photoshop and I added it to the public folder of my React App. When I create my component that holds my gif, I also use setTimeout() to run a function after 7 seconds.

This looks roughly like this::

const [showGIFValue, showGIFUpdate] = useState("file.gif");
  return (<div>
    <img id="uniqueID" src={showGIFValue} alt="alt text"/>
    {setTimeout(()=>{
      //change showGIFValue from the .gif file to a .png file
      showGIFUpdate("file.png");
    }, (7000))}
  </div>);

So for your issue, you need to see when the clouds are done swooping, so look at your file and see how many milliseconds the gif lasts for and create a setTimeout() that will run your function after that time.

How can I check to see if a gif animation has completed

2 Answers2