Как отобразить среднее значение gif при загрузке формы отправки JQuery - PullRequest
Новая
       15

Как отобразить среднее значение gif при загрузке формы отправки JQuery

9 голосов
/ 15 ноября 2011

Я пытаюсь показать простой вращающийся gif-файл во время выполнения отправки (это занимает немного времени, потому что мне нужно установить связь с поставщиками через веб-службы).

Итак, у меня есть это: 

$('#gds_form').submit(function() {
        var pass = true;
        //some validations

        if(pass == false){
            return false;
        }

        $("body").prepend('<div class="ui-widget-overlay" style="z-index: 1001;"></div>');
        $("body").prepend("<div id ='PleaseWait'><img src='/images/spinner.gif'/></div>");
        return true;
    });

Дело в том, что .gif не показывает никакой анимации, он как будто заморожен.

Почему?

Есть еще один способ реализовать это (обратите внимание, что я не использую AJAX и не хочу)?

Спасибо.

Ответы [ 5 ]

13 голосов
/ 15 ноября 2011

Используя функцию jQuery submit, вы можете указать загрузочное изображение следующим образом: 

$('#form').submit(function() {
    $('#wait').show();
    $.post('/somepage.htm', function() {
        $('#wait').hide();
    });
    return false;
});
11 голосов
/ 15 ноября 2011

Вы пытались загрузить изображение в готовый документ, только скрыв его. Затем отобразить это в вашей функции? Таким образом, изображение уже загружено и вращается. 

$(document).ready(function() {
    $("body").prepend('<div id="overlay" class="ui-widget-overlay" style="z-index: 1001; display: none;"></div>');
    $("body").prepend("<div id='PleaseWait' style='display: none;'><img src='/images/spinner.gif'/></div>");
});

$('#gds_form').submit(function() {
    var pass = true;
    //some validations

    if(pass == false){
        return false;
    }
    $("#overlay, #PleaseWait").show();

    return true;
});
1 голос
/ 15 ноября 2011

Реальная проблема с вашей реализацией заключается в том, как клиентская сторона узнает, когда ваш запрос будет выполнен.Одна из причин, почему Ajax полезен, заключается в том, что у нас есть понятие состояний, и поэтому мы можем отображать загрузчик, пока клиент ожидает ответа, и удалять загрузчик, когда клиент получает ответ.

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

0 голосов
/ 15 ноября 2011

Я бы начал с div на странице, но с style='display:none' затем вставил бы $('#PleaseWait').show() в ваш код, когда вы хотите, чтобы он появился.

Если вы не включите display:none, вы можете редактировать, чтобы увидеть, как он выглядит, без необходимости повторной отправки формы.

Примечание: вы можете обернуть оверлей и gif в родительский div для удобства.

0 голосов
/ 15 ноября 2011

Используйте .show () и .hide () для переключения анимации загрузки при отправке?

...