Jak wyświetlić wskaźnik „zajętości” w jQuery?

Jak wyświetlić obracający się wskaźnik „zajętości” w określonym miejscu na stronie internetowej?

Chcę uruchomić / zatrzymać wskaźnik, gdy żądanie Ajax rozpoczyna / kończy się.

Czy to naprawdę kwestia pokazania / ukrycia animowanego gifa, czy jest bardziej eleganckie rozwiązanie?

Możesz po prostu pokazać / ukryć gif, ale możesz również osadzić go w ajaxSetup, więc jest wywoływany przy każdym żądaniu Ajax.

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

Jedna uwaga jest taka, że ​​jeśli chcesz wykonać określone żądanie Ajax bez posiadania pokrętła ładowania, możesz to zrobić w następujący sposób:

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

W ten sposób poprzednia konfiguracja $ .ajaxSetup nie wpłynęła na żądanie z global: false.

Więcej szczegółów na: http://api.jquery.com/jQuery.ajaxSetup

Dokumentacja jQuery zaleca wykonanie następujących czynności:

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

Gdzie #loadingjest element ze wskaźnikiem zajętości.

Bibliografia:

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

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

• Ponadto jQuery.ajaxSetupAPI wyraźnie zaleca unikanie jQuery.ajaxSetupnastępujących sytuacji:

  Uwaga: Globalne funkcje zwrotne powinny być ustawione z ich odpowiednimi obsługi zdarzeń globalnych Ajax METODY .ajaxStart(), .ajaxStop(), .ajaxComplete(), .ajaxError(), .ajaxSuccess(), .ajaxSend()-rather niż wewnątrz optionsobiektu dla $.ajaxSetup().

Mam tendencję do po prostu pokazywania / ukrywania IMG, jak powiedzieli inni. Znalazłem dobrą stronę, która generuje „ładowanie gifów”

Link Po prostu umieściłem go wewnątrz a divi ukryj domyślnie display: none;(css), a następnie gdy wywołasz funkcję pokaż obraz, po jego całkowitym ukryj go ponownie.

tak, tak naprawdę chodzi tylko o pokazanie / ukrycie animowanego gifu.

Zrobiłem to w moim projekcie,

utwórz element div z adresem URL w tle jako gif, który jest niczym innym jak animowanym gifem

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

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

w wywołaniu AJAX dodaj tę klasę do elementu DIV, aw przypadku pomyślnego AJAX usuń klasę.

załatwi sprawę.

daj mi znać, jeśli potrzebujesz czegoś innego, mogę podać więcej szczegółów

w sukcesie AJAX usuń klasę

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

Aby nieco rozszerzyć rozwiązanie Rodrigo - w przypadku żądań, które są wykonywane często, możesz chcieć wyświetlić obraz wczytywania tylko wtedy, gdy żądanie trwa dłużej niż minimalny przedział czasu, w przeciwnym razie obraz będzie stale pojawiał się i szybko znikał

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
    }
});

Zrobiłem to w swoim projekcie:

Zdarzenia globalne w application.js:

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

„ładowanie” to element do pokazania i ukrycia!

Źródła: http://api.jquery.com/Ajax_Events/

Musiałem użyć

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();
  });

Stary wątek, ale chciałem zaktualizować, ponieważ dzisiaj pracowałem nad tym problemem, nie miałem jquery w moim projekcie, więc zrobiłem to w zwykły stary sposób javascript, musiałem również zablokować zawartość na ekranie, więc w moim xhtml

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

w moim javascript

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