jquery - 为什么当我调用 AJAX 方法时，我的动画 GIF 没有动画？

Question

使用下面的代码，我可以在 AJAX 数据加载时正确显示对话框，但动画 GIF 不是动画的 - 看起来真的很糟糕。

CSS:

.loading {
    background: url('/images/loading.gif');
}

JavaScript:

$(function() {
    $("#createButton").click(function(e){
        e.preventDefault();

        var $form = $(this).closest("form");

        $("#pleaseWait-dialog").dialog({
            modal: true,
            height: 200,
            resizable: false,
            draggable: false
        });

        $.ajax({
            type: "GET",
            url: "myScript.cfm",
            async: true,
            success: function() {
                $form.submit();
            }
        });

        return false;
    });
});

HTML:

<form action="post.cfm" method="post">
    <input
        id="createButton"
        type="submit"
        name="createButton"
        value="Create a New Thing" />
</form>
<div id="pleaseWait-dialog" title="Gathering Data" style="display:none;">
    <span class="loading"></span>
    <p>Thank you for your patience while we gather your data!</p>
</div>

Answer 1

这个问题只在IE中出现吗？请参阅此页面，了解有关 IE 导致动画 gif 问题的信息。一旦表单提交完成，你的 gif 动画可能会变得困惑。本页对此进行了深入讨论。

http://www.stillnetstudios.com/animated-in-progress-indicator-for-long-running-pages/

解决方法是在调用表单提交后显示等待。当然，如果您的 AJAX 调用需要很长时间才能处理，您的用户就会想知道发生了什么。