1

I want to make a web page which has 2 buttons...On clicking button 1 , "loading.gif" plays and on clicking button 2, it stops but the image is still displayed. I want these activities to be CPU efficient, i.e. they should consume less CPU cycles.

Ways that I have tried so far :

  1. I captured a still image from "loading.gif", and on clicking button 2, I changed the img.src attribute to "still.gif".

  2. I divided "loading.gif" into individual frames using an online tool. On clicking button 1, I called the frames manually with the timer set to 100msec.(i.e. I did the animation manually). And,on clicking button 2, I cleared the timer using clearTimeout().

  3. I followed the code : Stopping GIF Animation Programmatically which used canvas to draw the still image onto the loading image. So, basically "loading.gif" is still playing behind the still image being displayed on screen ,which will consume more CPU cycles.

  4. I tried to use CSS properties "animation-play-state : paused " and "animation-play-state: running" to stop and play the gif, respectively. But then I figured out that the CSS animation properties work only on frames or images, not on gifs.
  5. I found a property "animate:false" used by people in jquery codes.Is there any way to use that property in javascript ? I don't want to use jquery in my code.

So, is there any way I can stop the gif, without converting the gif into individual frames, without using jquery , and still keeping it CPU efficient.

Community
  • 1
  • 1
Ayushi Khopkar
  • 41
  • 1
  • 4

1 Answers1

0

Did you try libgif-js ?

https://github.com/buzzfeed/libgif-js is a quite popular javascript gif player with progress bar and pause function. Pure javascript, 35kb. This may give you clues, or even achieve your goal.

technico
  • 1,192
  • 1
  • 12
  • 22