为什么当我调用AJAX方法时动画GIF没有动画? [英] Why is my animated GIF not animated when I call an AJAX method?

问题描述

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

Using the code below, I can get the dialog to display properly while the AJAX data loads, but the animated GIF is not animated - looks really crappy.

CSS:

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

JavaScript:

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>

推荐答案

仅在IE中存在此问题吗?有关IE导致动画Gif出现问题的信息，请参见此页面.提交表单后，您的动画gif可能会混乱.本页对此进行了深入讨论.

Is this problem only in IE? See this page about IE causing problems with animated gifs. Once the form submit is made your animated gif may get messed up. This page talks about it in depth.

http://www.stillnetstudios.com /animated-in-progress指标用于长时间运行的页面/

一种解决方法是在调用表单提交后显示等待.当然，如果您的AJAX调用要花费很长时间来处理您的用户，就会想知道这是怎么回事.

A workaround would be to display the wait after the form submit has been called. Of course if it takes a long time for your AJAX call to process your user will be left wondering what's going on.

这篇关于为什么当我调用AJAX方法时动画GIF没有动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！