Browser: Continue gif animation after escape is pressed

Question

Firefox (and other browsers i believe) stop gif animation when you click the Stop button or invoke it via the Escape key.

I have a text input that on change makes ajax requests to update other elements. As part of this ajaxyness i have an animated gif to show feedback.
I also trap the escape key press in this input so as to clear the text field for better UX.

My problem is after the escape key is pressed once, none of the ajax gifs animate anymore until the page is refreshed. Does anyone know a workaround?

---

Stuff i've tried:

I tried the e.stopPropagation(); and e.cancelBubble = true; in the function handling the e.keyCode == 27 and that didn't seem to work. I suspect that this stops trigging more js events and the browser catches the escape irrespective of js activity.

I have the gif showing/hiding via adding/removing a css class so it's difficult to apply the "change gif url to reset" workaround. I dont even know if this works anyway - didn't test it. But it seems difficult. If anyone knows that this works and knows of an easy way to apply the hack with background-image: url(../images/ajax-loader_dotcirclel13x13.gif); css then please let me know.

Answer 1

Unfortunately you can't override the fact that the browser stops an animated gif when the ESC key is pressed. I would assume this is so that the user always has the ability to stop annoying animated gifs if they become too overwhelming (I'm not saying that your loading gif is annoying ;)). This page describes how they can be disabled all together in FF.

I would recommend using JavaScript to create a simple animation. You could even do it using a sprite with all of the frames from the gif animation and just moving the background-position around for each frame.

Answer 2

$(document).keydown(function(event){
    if (event.keyCode == 27) {
        //FIXES FIREFOX GIF STOPPING
        event.preventDefault();
    }
});