Suspending GIF in javascript

Background : attempt to pause GIF button, cross browser

Initial implementation (works in Chrome / Safari): drawing a gif on the canvas and displaying the canvas correctly pauses the gif. but in FF and IE it doesn’t work (FF - it shows only the first frame, IE - even with excanvas it shows that the gif is still animated out of frame)

What does GIF pause in FF and IE? Pressing the ESC button with the selected window pauses GIF images on the currently displayed page in FF and IE

So what am I trying to do? So, for FF and IE, I tried to implement something that causes the ESC key to be pressed ... and I did ... and it successfully launches the ESC key ... but it does not stop the GIF.

all I'm trying to do is simulate an escape key in Firefox and IE.

What i tried

// defined before the script that calls it jQuery.fn.simulateKeyPress = function(keyCode) { // Internally calls jQuery.event.trigger // with arguments (Event, data, elem). That last arguments is very important! jQuery(this).trigger({ type: 'keypress', which: keyCode, keyCode: keyCode }); }; // Simulate the key press, in something called onclick of a button element $(document).simulateKeyPress(27); 

I do not recommend this code to me above, because I copied the corresponding fragments and im 10,000,000% sure that it works, since I linked the warning to esc by clicking, and it appeared when I clicked the button that caused the simulateKeyPress () call. just sending it to show that I tried.

So basically, simulating ESC does not do what pressing ESC does in FF and IE, in terms of pausing GIFs, namely: pressing ESC pauses gifs in ff, etc., and also triggers a key press (test enable) for 27 (which is ESC) does not do this. What for? any workaround at all

+4
source share
1 answer

Convert gif frames to sprite images and set them into a loop of background images through them by changing the position of the background div using javascript. Then it would be easy to interrupt the interval timer on any event of your choice.

+1
source

Source: https://habr.com/ru/post/1401287/


All Articles