Як відобразити індикатор "зайнято" за допомогою jQuery?

Як відобразити індикатор "зайнятості", що крутиться, у певній точці веб-сторінки?

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

Це справді просто питання показу / приховування анімованого GIF-файлу, чи є більш елегантне рішення?

Ви можете просто показати / приховати 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, як заявляли інші. Я знайшов хороший веб-сайт, який генерує "завантаження GIF"

Посилання Я просто поміщаю його всередину a 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";