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

【问题标题】：Why is my animated GIF not animated when I call an AJAX method?当我调用 AJAX 方法时，为什么我的动画 GIF 没有动画？
【发布时间】：2011-07-19 16:48:59
【问题描述】：

使用下面的代码，我可以在加载 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>

【问题讨论】：

你的 gif 动画在哪里？我在任何地方都看不到对 gif 的引用...如果您通过样式添加它，我不确定作为背景图像的 gif 是否会动画...
GIF 是在 CSS 中的（我添加它是为了澄清）。仅供参考，作为背景图像的 GIF 确实具有动画效果。

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

这个问题只存在于 IE 中吗？有关 IE 导致动画 gif 问题的信息，请参阅此页面。提交表单后，您的动画 gif 可能会搞砸。本页对此进行了深入讨论。

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

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

【讨论】：

感谢您的信息 - 我目前正在 IE 中进行测试。在表单提交后显示加载器具有相同的结果。重点是我希望用户知道正在做的事情可能需要几秒钟，所以他们不会惊慌失措并点击刷新等。

【解决方案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;
  });
});

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

要让它在 IE 中工作，请插入一个带有 gif 的 iframe，这听起来很疯狂，但很有效。

【讨论】：