Как отобразить индикатор «занято» с помощью jQuery?

Как отобразить вращающийся индикатор «занято» в определенном месте веб-страницы?

Я хочу запустить / остановить индикатор при запуске / завершении запроса Ajax.

Это действительно просто вопрос отображения / скрытия анимированного gif или есть более элегантное решение?

Вы можете просто показать / скрыть гифку, но вы также можете встроить ее в ajaxSetup, чтобы она вызывалась при каждом запросе ajax.

$.ajaxSetup({
    beforeSend:function(){
        // show gif here, eg:
        $("#loading").show();
    },
    complete:function(){
        // hide gif here, eg:
        $("#loading").hide();
    }
});

Одно замечание: если вы хотите выполнить определенный запрос ajax без счетчика загрузки, вы можете сделать это следующим образом:

$.ajax({
   global: false,
   // stuff
});

Таким образом, предыдущий $ .ajaxSetup не повлияет на запрос global: false.

Более подробная информация доступна по адресу: http://api.jquery.com/jQuery.ajaxSetup.

В документации jQuery рекомендуется сделать что-то вроде следующего:

$( document ).ajaxStart(function() {
  $( "#loading" ).show();
}).ajaxStop(function() {
  $( "#loading" ).hide();
});

Где #loadingнаходится элемент с вашим индикатором занятости?

Рекомендации:

• http://api.jquery.com/ajaxStart/

• http://api.jquery.com/ajaxStop/

• Кроме того, jQuery.ajaxSetupAPI явно рекомендует избегать jQuery.ajaxSetup:

  Примечание: Глобальные функции обратного вызова должны быть установлены с их соответствующим глобальным Ajax обработчик событий methods- .ajaxStart(), .ajaxStop(), .ajaxComplete(), .ajaxError(), .ajaxSuccess(), .ajaxSend()-rather чем в optionsобъекте для $.ajaxSetup().

Я обычно просто показываю / скрываю IMG, как заявляли другие. Я нашел хороший сайт, который генерирует "загрузочные гифки"

Ссылка Я просто помещаю его внутрь divи скрываю по умолчанию display: none;(css), затем, когда вы вызываете функцию, показываю изображение, как только оно полностью скрывает его снова.

да, это действительно просто вопрос показа / скрытия анимированного gif.

Я сделал это в своем проекте,

создайте div с задним URL-адресом как gif, который представляет собой не что иное, как анимацию gif

<div class="busyindicatorClass"> </div>

.busyindicatorClass
{
background-url///give animation here
}

в вашем вызове ajax добавьте этот класс в div и в успешном ajax удалите класс.

он сделает свое дело.

дайте мне знать, если вам понадобится что-то еще, я могу дать вам более подробную информацию

в успехе ajax удалите класс

success: function(data) {
    remove class using jquery
  }

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

var loading = false;

$.ajaxSetup({
    beforeSend: function () {
        // Display loading icon if AJAX call takes >1 second
        loading = true;
        setTimeout(function () {
            if (loading) {
                // show loading image
            }
        }, 1000);            
    },
    complete: function () {
        loading = false;
        // hide loading image
    }
});

Я сделал это в своем проекте:

Глобальные события в application.js:

$(document).bind("ajaxSend", function(){
   $("#loading").show();
 }).bind("ajaxComplete", function(){
   $("#loading").hide();
 });

«загрузка» - это элемент, который нужно показать и скрыть!

Ссылки: http://api.jquery.com/Ajax_Events/

Мне пришлось использовать

HTML:
   <img id="loading" src="~/Images/spinner.gif" alt="Updating ..." style="display: none;" />

In script file:
  // invoked when sending ajax request
  $(document).ajaxSend(function () {
      $("#loading").show();
  });

  // invoked when sending ajax completed
  $(document).ajaxComplete(function () {
      $("#loading").hide();
  });

Старый поток, но я хотел обновить, так как сегодня я работал над этой проблемой, у меня не было jquery в моем проекте, поэтому я сделал это обычным старым способом javascript, мне также нужно было заблокировать контент на экране, поэтому в моем xhtml

    <img id="loading" src="#{request.contextPath}/images/spinner.gif" style="display: none;"/>

в моем javascript

    document.getElementsByClassName('myclass').style.opacity = '0.7'
    document.getElementById('loading').style.display = "block";