CODEWITHSUNDEEP
jqueryanimationgif
Erik B
Erik B

Reputation: 198

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

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?

Upvotes: 3

Views: 5327

Answers (2)

user12246115
user12246115

Reputation:

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.

Upvotes: 0

Joel Sharin
Joel Sharin

Reputation: 82

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

Upvotes: 3

Related Questions