Jquery 为什么调用AJAX方法时我的动画GIF没有动画？

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

CSS:

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:

感谢您在我们收集数据时的耐心等待

尝试在用户单击时显示它，并在ajax请求完成后隐藏它

$(function() {
$("#createButton").click(function(e){
    $('#pleaseWait-dialog').show();
     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;
  });
});

---

这个问题只存在于IE中吗？请参阅本页关于IE导致动画GIF出现问题的内容。一旦表单提交完成，您的动画gif可能会被弄乱。本页将对此进行深入讨论

---

解决方法是在调用表单提交后显示等待。当然，如果AJAX调用需要很长时间来处理，那么用户将不知道发生了什么

要重新启动动画，请将图像的

src

属性设置为其当前值

---

对于使用超时在几毫秒后重新启动动画的代码。

要使其在IE中工作，请插入带有gif的iframe，听起来很疯狂，但可以工作。

动画gif在哪里？我在任何地方都看不到对gif的引用。。。如果你是通过样式添加它，我不确定作为背景图像的GIF是否会动画…GIF是CSS格式的（我添加它是为了澄清）。仅供参考，GIF作为背景图像会产生动画。感谢您提供的信息-我目前正在IE中进行测试。在表单提交后显示加载程序具有相同的结果。关键是我想让用户知道一些可能需要几秒钟才能完成的事情，这样他们就不会惊慌失措并点击刷新等等。

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

$(function() {
$("#createButton").click(function(e){
    $('#pleaseWait-dialog').show();
     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;
  });
});