Как показать обработку анимации/прядильщика во время запроса ajax?

Ответ 1

$.ajax({
  type: "POST",
  url: "/game-checkin",
  data: dataString,
  beforeSend: function () {
    // ... your initialization code here (so show loader) ...
  },
  complete: function () {
    // ... your finalization code here (hide loader) ...
  },
  success: function (badges) {
    $('#checkin-form').html("<div id='message'></div><div id='badges'></div>");
    $('#message').html("<h2><img class=\"check-mark\" src=\"/static/images/check-mark.png\"/>You are checked in!</h2>");
    $.each(badges, function (i, badge) {
      $('#badges').append("<h2>New Badge!</h2><p><img class='badge' src='" + badge.image_url + "'><span class='badge-title'>" + badge.name + "</span></p>");
    })
  }
});

http://api.jquery.com/jQuery.ajax/:

Вот перехватчики обратного вызова, предоставляемые $.ajax():

обратный вызов beforeSend вызывается; он получает объект jqXHR и карту настроек в качестве параметров. обратные вызовы ошибок вызываются в том порядке, в котором они зарегистрированы, если запрос не выполняется. Они получают jqXHR, строку, указывающую тип ошибки, и объект исключения, если это применимо. Некоторые встроенные ошибки предоставляют строку в качестве объекта исключения: "abort", "timeout", "No Transport". Обратный вызов dataFilter вызывается сразу после успешного получения данных ответа. Он получает возвращенные данные и значение dataType и должен возвращать (возможно, измененные) данные, чтобы перейти к успеху. После этого успешные обратные вызовы вызываются в том порядке, в котором они зарегистрированы. Они получают возвращенные данные, строку, содержащую код успеха, и объект jqXHR. полные обратные вызовы запускаются в порядке их регистрации, когда запрос завершается, в случае неудачи или успеха. Они получают объект jqXHR, а также строку, содержащую код успеха или ошибки.

Обратите внимание на дополнения метода beforeSend и complete к коду.

Надеюсь, это поможет.

Ответ 2

Если вы используете jQuery 1.5, вы можете сделать это красиво, ненавязчиво и в целом с помощью prefilter. Для этого сделайте очень простой плагин:

(function($) {

    var animations = {};

    $.ajaxPrefilter(function( options, _, jqXHR ) {
        var animation = options.animation && animations[ options.animation ];
        if ( animation ) {
            animation.start();
            jqXHR.then( animation.stop, animation.stop );
        }
    });

    $.ajaxAnimation = function( name, object ) {
        if ( object ) {
            loadingAnimations[ name ] = object;
        }
        return loadingAnimations[ name ];
    };

})( jQuery );

Вы устанавливаете анимацию следующим образом:

jQuery.ajaxAnimation( "spinner" , {
    start: function() {
        // code that starts the animation
    }
    stop: function() {
        // code that stops the animation
    }
} );

то вы указываете анимацию в своих параметрах ajax:

jQuery.ajax({
    type: "POST",
    url: "/game-checkin",
    data: dataString,
    animation: "spinner",
    success: function() {
        // your success code here
    }
});

и предварительный фильтр гарантирует, что анимация "spinner" будет запущена и остановлена ​​при необходимости.

Конечно, таким образом, вы можете установить альтернативные анимации и выбрать тот, который вам нужен для каждого запроса. Вы даже можете настроить анимацию по умолчанию для всех запросов с помощью ajaxSetup:

jQuery.ajaxSetup({
    animation: "spinner"
});

Ответ 3

Лучший метод, который я нашел, предполагая, что вы заполняете настоящее, но пустое поле, должно иметь класс .loading, определенный с помощью background-image: url('images/loading.gif') в вашем CSS. Затем вы можете добавить и удалить класс загрузки при необходимости с помощью jQuery.

Ответ 4

Процесс AJAX начинается, когда вы запускаете метод $.ajax(), и он останавливается, когда выполняется "полный" обратный вызов. Итак, начните обработку изображений/уведомлений прямо перед строкой $.ajax() и завершите ее в "полном" обратном вызове.

ajaxStart и ajaxStop обработчики могут быть добавлены к любым элементам и будут вызываться всякий раз, когда запускаются или останавливаются запросы ajax (если есть параллельные экземпляры, запуск запускается только на первом, останавливается на последнем, чтобы идти). Таким образом, это просто другой способ сделать глобальное уведомление, если у вас есть, например, spinner состояния где-то на странице, которая представляет любую активность.

Ответ 5

$(function() {
        $('.error').hide();
        $("#checkin-button").click(function() {
                var mid = $("input#mid").val();
                var message = $("textarea#message").val();
                var facebook = $('input#facebook').is(':checked');
                var name = $("input#name").val();
                var bgg_id = $("input#bgg-id").val();
                var thumbnail = $("input#thumbnail").val();
                var dataString = 'mid=' + mid + '&message=' + message + '&facebook=' + facebook + '&name=' + name + '&bgg_id=' + bgg_id + '&thumbnail=' + thumbnail;
                $.ajax({
                        type : "POST",
                        url : "/game-checkin",
                        data : dataString,
                        beforeSend : function() {
                         $('#preloader').addClass('active');
                        },
                        success : function(badges) {
                            $('#preloader').removeClass('active');
                            $('#checkin-form').html("<div id='message'></div><div id='badges'></div>");
                            $('#message').html("<h2><img class=\"check-mark\" src=\"/static/images/check-mark.png\"/>You are checked in!</h2>");
                            $.each(badges, function(i, badge) {
                                    $('#badges').append("<h2>New Badge!</h2><p><img class='badge' src='" + badge.image_url + "'><span class='badge-title'>" + badge.name + "</span></p>");
                                });
                        },
                        complete : function() {
                            $('#preloader').removeClass('active');                      
                        }
                    });
                return false;
            });
    });

#preloader{
 background: url(staticpreloader.gif);
}
.active {
 background: url(activepreloader.gif);
}

Ответ 6

Я написал сообщение о том, как это сделать на общем уровне документа.

// prepare the form when the DOM is ready 
$(document).ready(function() { 

  // Setup the ajax indicator
  $('body').append('<div id="ajaxBusy"><p><img src="images/loading.gif"></p></div>');

  $('#ajaxBusy').css({
    display:"none",
    margin:"0px",
    paddingLeft:"0px",
    paddingRight:"0px",
    paddingTop:"0px",
    paddingBottom:"0px",
    position:"absolute",
    right:"3px",
    top:"3px",
     width:"auto"
  });
});

// Ajax activity indicator bound to ajax start/stop document events
$(document).ajaxStart(function(){ 
  $('#ajaxBusy').show(); 
}).ajaxStop(function(){ 
  $('#ajaxBusy').hide();
});

Ответ 7

вы можете установить глобальный обработчик значков загрузки ajax, используя здесь #ajxLoader берет ваш значок загрузки

   $( document ).ajaxStart(function() {
        $("#ajxLoader").fadeIn();
    });

    $( document ).ajaxComplete(function() {
        $("#ajxLoader").fadeOut();
    });