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%>

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

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);

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();   
        }

友情链接