Question

I’ve been dealing with this before but it seems like the problem came back. Let me explain.

I have a web page that lets a user upload a big file, after which it may also take several seconds for the ASP.NET server-side script to process it. In the meantime I wanted to show a loader/spinner animation in a web browser to prevent users from clicking the submit button again.

I used the following JQuery code:

$('#ButtonImportData').click(function () {
    $('.importSubmitSpinner').css('display', 'inline');
}

here’s the HTML for the spinner image:

<img src="Graphics/spinner_big.gif" width="28" height="28" class="importSubmitSpinner" alt="Spinner" />

and here’s CSS:

.importSubmitSpinner
{
    margin: 0px 10px 0px 6px;
    width: 28px;
    height: 28px;
    display: none;
}

spinner_big.gif is a simple GIF file with an animation to signal for a user that a page is loading.

The above approach works in almost all browsers, except … guess which one? Yes, IE! What happens in IE is that after a user clicks the ButtonImportData button the spinner is displayed but the animation stops immediately, basically giving a user a false indication that a page got hung up which prompts them to click submit again — an opposite to what I wanted to do.

I stopped using IE a long time ago but evidently there is about half of the Internet community that still uses it. Man, how can people use that piece of *&^%? Anyway, that is not a question 🙂 The question is, how to make this simple task work in IE and make my animation actually play?

PS. I’ve been testing it with IE 9 or whatever is the current “beauty of the web” for Windows 7.

EDIT:

Thanks to, ShadowScripter, I found a solution. Here’s what worked for me:

1 Add the following to HTML to determine if we’re running on IE (because we don’t need to do this “hack” for any other web browser):

<![if !IE]>
<script type='text/javascript'>
var bNotIE = 1;
</script>
<![endif]>

2 We need to add ID to the img element:

<img src="Graphics/spinner_big.gif" width="28" height="28" class="importSubmitSpinner" alt="Spinner" id="imgSpinnerImport" />

3 Then to display the GIF animation:

$('#ButtonImportData').click(function () {
    //For "normal" browsers
    $('.importSubmitSpinner').show();

    if (typeof (bNotIE) == 'undefined') {
        //The following must be done only in case of IE
       //NOTE: We need to load the same file but with a different name
       //   because if you don't change the file name it won't work!
        setTimeout('document.images["imgSpinnerImport"].src = "Graphics/spinner_big_ie.gif"', 200);
    }
}

Answer 1

I can’t seem to replicate your problem in any IE version.

Here’s the live example I tested it in.

There can be a lot of different reasons why yours doesn’t work.

• Other code might interfere
• GIF image is faulty
• Client computer; workload

Oh, also,

you can use .show() instead of having to do the .css("display", "inline") thing.
JQuery can identify which default display mode the element should have if none is specified.