Плагин jQuery для отображения «загрузки» во время ожидания ответа AJAX

Question

Я написал некоторый код jQuery ajax, в который отправляю запрос на сервер при изменении параметра раскрывающегося списка. На основании этого изменения 4 или 5 текстовых полей меняют свои данные и загружается куча новых изображений. Все чувствует себя изящно.

Но мне было интересно, есть ли плагин, предоставленный jQuery, который сделает страницу темной ... покажет «загрузку» или спиннер на секунду, пока запрос не вернется с сервера? Я помню, что видел вокруг, но не смог его найти.

Answer 1

Есть два объекта, которые вы можете передать универсальному объекту ajax, называемые ajaxStart и ajaxStop. Это обработчики событий, которые запускаются при отправке и получении ajax-запроса.

ajaxStart (глобальное событие)
Это событие транслируется, если запущен Ajax-запрос, и в данный момент другие Ajax-запросы не выполняются.

ajaxStop (Глобальное событие)
Это глобальное событие инициируется, если больше не обрабатываются запросы Ajax.

Имея это в виду, довольно легко настроить то, что вы ищете:

$("#loading").bind("ajaxStart", function(){
    $(this).show();
}).bind("ajaxStop", function(){
    $(this).hide();
});

Просто сделайте ваш #loading div как хотите - взгляните на многочисленные плагины лайтбокса или BlockUI , чтобы добиться чего-то похожего на то, что вы просили.

Конечно, вы можете настроить его на то, что вам нравится, но как только он установлен в верхней части вашего сценария, он устанавливает и забывает.

Если вы используете плагин BlockUI, то все, что вам нужно сделать, это:

$().ajaxStart($.blockUI).ajaxStop($.unblockUI);

Answer 2

Я бы предложил использовать методы событий jQuery Ajax ajaxStart () и ajaxComplete ()

Документация здесь под Ajax Events