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>

where is your animated gif? I can't see a reference to a gif anywhere... if you are adding it through styles I'm not sure whether gifs as background images will animate... — Chris, Jul 19 '11 at 16:57
The GIF is in CSS (I've added it for clarification). FYI, GIFs as background images DO animate. — Eric Belair, Jul 19 '11 at 18:47

score 2 · Answer 1 · answered Jul 19 '11 at 17:02

2

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.

answered Jul 19 '11 at 17:02

mrtsherman

39,342
23
87
111

Thanks for the info - I am currently testing in IE. Displaying the loader after the form submit has the same result. The whole point is I want the user to know something is being done that may take a few seconds, so they don't freak out and hit refresh, etc. – Eric Belair Jul 19 '11 at 18:43

score 0 · Answer 2 · answered May 23 '13 at 02:45

0

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

answered May 23 '13 at 02:45

Björn

12,587
12
51
70

score 0 · Answer 3 · answered Jul 19 '11 at 16:52

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;
  });
});

score 0 · Answer 4 · edited May 23 '17 at 12:19

0

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.

edited May 23 '17 at 12:19

Community

1
1

answered Jul 20 '11 at 08:47

Aaron Digulla

321,842
108
597
820

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

4 Answers4

Linked