How can I make IE 9 animate a gif right before I submit a form

Question

So I have an animated GIF that I only want to show when a user clicks a submit button, this way they think something is happening if it takes a while for a response.

The problem is in IE9 the GIF doesn't animate. I have tried adding it dynamically and adding it before hand and just having it off the page and neither seemed to work. I also tried adding a delay before adding the GIF but that didn't help either.

One other thing, I believe this may be related to the form doing a POST as opposed to a GET request (GET request experiences this problem), however I need to do a GET for reasons I would rather not get into.

try this http://www.norio.be/blog/2008/09/animated-gif-not-working-internet-explorer — coder, Feb 02 '12 at 19:56
That has worked in past versions of IE, but I have found that it doesn't seem to work with IE9. Have you had success with IE9 in particular? — Kory Hodgson, Feb 02 '12 at 20:01
I've had a similar issue with IE9 killing images loading in Modals [Modal dialog missing image on form submit, IE9+](http://stackoverflow.com/questions/16982505/modal-dialog-missing-image-on-form-submit-ie9). I *believe* that IE9 kills the ANY processing when a form is submitted. Presuming this is some misplaced efficiency thing? — Liam, Aug 09 '13 at 14:40

score 1 · Answer 1 · answered Feb 02 '12 at 19:56

1

Once you submit a form on a page all execution of the current page STOPS. You can use AJAX instead, or post your form to an Iframe.

answered Feb 02 '12 at 19:56

Diodeus - James MacFarlane

112,730
33
157
176

1

True, but it an animated GIF is animating it should still be able to animate until it is no longer displayed instead of being displayed as a static image. This is what all other browsers do, even past versions of IE are capable of this – Kory Hodgson Feb 02 '12 at 19:58

score 1 · Answer 2 · answered Feb 02 '12 at 20:11

Not sure about your specific IE9 issue but you can try doing this in jquery:

$(function(){
  $('form#my-form').submit(function(e){
    $('#my-animating-gif').show();
  });
};

and just make the animated gif in the dom on page load with the attribute style="display:none;" (or a hidden class and the proper css in your stylesheet)

If that fails to do the trick you can see if you can prevent the regular form submission and do it yourself after you show the gif.... but I'm pretty sure doing this is identical to the previous version. Worth a try I guess.

$(function(){
  $('form#my-form').submit(function(e){
    e.preventDefault();
    $('#my-animating-gif').show();
    $(this).submit();  // <-- This might cause infinite recursion
                       // into this event handler.  Probably a
                       // terrible idea.  Go with the above version,
                       // or serialize the form data yourself and submit
                       // it as a separate form but that's outside
                       // of the scope of this answer.
  });
};

Do you have a working example or code sample of what you've tried? Hard to give good answers when we're not sure what you've tried so far. — nzifnab, Feb 02 '12 at 20:13

score 0 · Answer 3 · answered Feb 03 '12 at 00:42

That has been a problem with every version of IE. Unfortuntely most of the old workarounds don't work with IE9. One that still does is spin.js, if you're ok with a javascript-only solution. It's pretty simple and has no dependencies (although there is a jQuery plugin for it if you want it). The basic syntax is:

HTML:

<div id="spinner" style="width:24px; height:24px"></div>

JS:

var opts = {
    lines: 12,
    length: 7,
    width: 4,
    radius: 12,
    color: '#000',
    speed: 1,
    trail: 54
};
var target = document.getElementById('spinner');
var spinner = new Spinner(opts).spin(target);

How can I make IE 9 animate a gif right before I submit a form

3 Answers3