Question

我有一个表单，其中提交功能需要几分钟。提交正在启动时，我想显示一个GIF动画。下面的代码显示了gif，但它没有移动。我该怎么做才能实现目标？

<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

这个问题只发生在IE中，对吗？ Rick Strahl在他的博客上讨论了这个问题。请务必阅读评论。

Animated GIF images in hidden page elements

Answer 2

按照Josh的链接，我可以使用以下方式让它工作：

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

Answer 3

如果有人在IE（现在是Edge）中仍有这个问题，我设法通过执行以下操作解决了这个问题

提供以下HTML：

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

以及以下Jquery：

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

在以下行中添加修复了问题：

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

所以你留下了

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

动画gif没有动画提交

3 个答案: