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调用需要很长时间来处理你的用户，那么就会想知道发生了什么。

Answer 2

尝试在用户点击并在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;
  });
});

Answer 3

要重新启动动画，请将图像的src属性设置为其当前值。

See this answer用于在几毫秒后使用超时重启动画的代码。

Answer 4

为了让它在IE中工作，插入一个内部带有gif的iframe，听起来很疯狂但有效。

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

4 个答案: