Animated gif not animating on submit

Question

I have a form where the submit function takes several minutes. I'd like to display an animated gif while the submit is cranking. The code below shows the gif, but it doesn't move. What can I do to get it going?

<script type="text/javascript">

    $(function() {
        $("#submit").click(function() {
            $("#wait").show();
            return true;
        });
    });

</script>

<% Using Html.BeginForm%>
<%-- Various input fields here --%>
<input id="submit" type="submit" value="Submit" />
<img id="wait" src="../../Content/images/ajax-loader.gif" alt="" style="display: none" />
<% End Using%>

Pipette

Answer 1

This problem is happening only in IE, correct? Rick Strahl discussed this on his blog some time back. Be sure to read the comments.

Animated GIF images in hidden page elements

Ticket

Hadn't even though about what it was doing in another browser, and sure enough, it works just fine in Chrome. Thanks! – Pipette

Answer 2

Followig Josh's link I was able to get it to work using:

setTimeout('document.images["loadimage"].src = "../Images/loading_bar.gif"', 200);

Bohannon

Answer 3

In case anybody is still having this issue in IE (and Edge now), I managed to fix the issue by doing the following

Give the following HTML:

<div id="loader" style="display:none;">
   <img src="/loading-spinner.gif" alt="Loading">
</div>

and the following Jquery:

 function ShowLoadingScreen {
        $("#loading-screen").show();
    }

adding in the following line fixes the issue:

$("#loader").html($("#loader").html());

so you're left with

function ShowLoadingScreen {
            $("#loader").html($("#loader").html());
            $("#loading-screen").show();   
        }

Triphthong