gif animado no animar en enviar

Question

Tengo un formulario en el que la función de presentar tarda varios minutos. Me gustaría mostrar un gif animado mientras que la somete es de arranque. El código siguiente muestra el gif, pero no se mueve. ¿Qué puedo hacer yo para ponerlo en marcha?

<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

Este problema ocurre sólo en IE, ¿correcto? Rick Strahl discutido esto en su blog hace algún tiempo. Asegúrese de leer los comentarios.

imágenes GIF animados en los elementos de página ocultos

Answer 2

siguiente enlace de Josh estaba capaz de conseguir que funcione usando:

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

Answer 3

En caso de que alguien sigue teniendo este problema en IE (y ahora Edge), he conseguido solucionar el problema de la siguiente manera

Dar el código HTML siguiente:

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

y la siguiente Jquery:

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

añadir en la línea siguiente corrige el problema:

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

por lo que te queda

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