Как показать загрузочный счетчик в jQuery?

Question

In Prototype Я могу показать изображение "loading ..." с этим кодом:

var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, 
onLoading: showLoad, onComplete: showResponse} );

function showLoad () {
    ...
}

В jQuery я могу загрузить страницу сервера в элемент следующим образом:

$('#message').load('index.php?pg=ajaxFlashcard');

но как мне добавить к этой команде загрузочный счетчик, как я это делал в Prototype?

Answer 1

Есть несколько способов. Мой предпочтительный способ - присоединить функцию к событиям ajaxStart / Stop на самом элементе.

$('#loadingDiv')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

Функции ajaxStart / Stop будут срабатывать при каждом вызове Ajax.

Обновление : Начиная с jQuery 1.8, в документации говорится, что .ajaxStart/Stop следует прикреплять только к document. Это преобразовало бы приведенный выше фрагмент в:

var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

Answer 2

Для jQuery я использую

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  },
  success: function() {}
});

Answer 3

Вы можете просто использовать функцию jQuery .ajax и использовать ее опцию beforeSend и определить некоторую функцию, в которой вы можете показывать что-то вроде div загрузчика, а в случае успеха вы можете скрыть этот div загрузчика.

jQuery.ajax({
    type: "POST",
    url: 'YOU_URL_TO_WHICH_DATA_SEND',
    data:'YOUR_DATA_TO_SEND',
    beforeSend: function() {
        $("#loaderDiv").show();
    },
    success: function(data) {
        $("#loaderDiv").hide();
    }
});

Вы можете иметь любое изображение Spinning Gif. Вот веб-сайт, который является отличным AJAX Loader Generator в соответствии с вашей цветовой схемой: http://ajaxload.info/

Answer 4

Вы можете вставить анимированное изображение в DOM непосредственно перед вызовом AJAX и выполнить встроенную функцию для его удаления ...

$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
  $("#myDiv").html('');
});

Это обеспечит запуск анимации в том же кадре при последующих запросах (если это имеет значение). Обратите внимание, что старые версии IE могут иметь проблемы с анимацией.

Удачи!

Answer 5

$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();

function showResponse() {
    hideLoad();
    ...
}

http://docs.jquery.com/Ajax/load#urldatacallback

Answer 6

Если вы используете $.ajax(), вы можете использовать что-то вроде этого:

$.ajax({
        url: "destination url",
        success: sdialog,
        error: edialog,
        // shows the loader element before sending.
        beforeSend: function () { $("#imgSpinner1").show(); },
        // hides the loader after completion of request, whether successfull or failor.             
        complete: function () { $("#imgSpinner1").hide(); },             
        type: 'POST', dataType: 'json'
    });  

Answer 7

Используйте плагин загрузки: http://plugins.jquery.com/project/loading

$.loading.onAjax({img:'loading.gif'});

Answer 8

Вариант: у меня есть значок с id = "логотип" в левом верхнем углу главной страницы; тогда при работе ajax поверх него накладывается картинка (с прозрачностью) в виде вращающегося файла.

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#logo').css('background', 'url(images/ajax-loader.gif) no-repeat')
  },
  complete: function(){
     $('#logo').css('background', 'none')
  },
  success: function() {}
});

Answer 9

Я закончил с двумя изменениями исходного ответа .

1. Начиная с jQuery 1.8, ajaxStart и ajaxStop должны быть подключены только к document. Это затрудняет фильтрацию только некоторых запросов AJAX. Soo ...
2. Переключение на ajaxSend и ajaxComplete позволяет проверять текущий запрос ajax перед показом счетчика.

Это код после этих изменений:

$(document)
    .hide()  // hide it initially
    .ajaxSend(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").show();
    })
    .ajaxComplete(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").hide();
    })

Answer 10

Вы можете просто назначить образ загрузчика тому же тегу, на который вы позже будете загружать контент, используя вызов Ajax:

$("#message").html('<span>Loading...</span>');

$('#message').load('index.php?pg=ajaxFlashcard');

Вы также можете заменить тег span на тег image.