Почему мой анимированный GIF не анимируется, когда я вызываю метод AJAX?

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 может испортиться. Эта страница рассказывает об этом подробно.

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

Обходным решением будет отображение ожидания после вызова отправки формы. Конечно, если вашему AJAX-вызову потребуется много времени, чтобы обработать ваш пользователь, вам будет интересно, что происходит.

Answer 2

Чтобы это работало в IE, вставьте iframe с gif внутри, звучит безумно, но работает.

Answer 3

Чтобы перезапустить анимацию, установите атрибут src изображения на его текущее значение.

См. Этот ответ для кода, который использует тайм-аут для перезапуска анимации через пару миллисекунд.

Answer 4

попытаться показать его, когда пользователь щелкнет и скрыть его после завершения запроса 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;
  });
});