Why is my animated GIF not animated when I call an AJAX method?

Question

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:

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

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-indicator-for-long-running-pages/

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.

Answer 2

try to show it when the user clicks and hiding it after the ajax request finishes.

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

To restart the animation, set the src attribute of the image to its current value.

See this answer for code which uses a timeout to restart the animation after a couple of milliseconds.

Answer 4

To make it work in IE insert an iframe with the gif inside, sounds crazy but works.