Wie zeigt man in jQuery einen Lade-Spinner an?

Question

En Prototyp Mit diesem Code kann ich ein "loading..."-Bild anzeigen:

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

function showLoad () {
    ...
}

En jQuery Ich kann damit eine Serverseite in ein Element laden:

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

aber wie füge ich ein Laden Spinner zu diesem Befehl, wie ich in Prototype tat?

Answer 1

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

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

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

Answer 2

Verwenden Sie das Lade-Plugin: http://plugins.jquery.com/project/loading

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

Answer 3

Am Ende habe ich zwei Änderungen an der Originalantwort .

1. Ab jQuery 1.8 sollten ajaxStart und ajaxStop nur noch an document . Das macht es schwieriger, nur einen Teil der Ajax-Anfragen zu filtern. Soo...
2. Umschalten auf ajaxSend y ajaxComplete macht es möglich, die aktuelle Ajax-Anfrage zu untersuchen, bevor der Spinner angezeigt wird.

Dies ist der Code nach diesen Änderungen:

$(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 4

Ich möchte auch zu dieser Antwort beitragen. Ich war auf der Suche nach etwas ähnlichem in jQuery und dies, was ich schließlich mit.

Ich habe meinen Ladespinner von http://ajaxload.info/ . Meine Lösung basiert auf dieser einfachen Antwort unter http://christierney.com/2011/03/23/global-ajax-loading-spinners/ .

Ihr HTML-Markup und CSS würden im Wesentlichen wie folgt aussehen:

<style>
     #ajaxSpinnerImage {
          display: none;
     }
</style>

<div id="ajaxSpinnerContainer">
     <img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
</div>

Und dann würde Ihr Code für jQuery etwa so aussehen:

<script>
     $(document).ready(function () {
          $(document)
          .ajaxStart(function () {
               $("#ajaxSpinnerImage").show();
          })
          .ajaxStop(function () {
               $("#ajaxSpinnerImage").hide();
          });

          var owmAPI = "http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=YourAppID";
          $.getJSON(owmAPI)
          .done(function (data) {
               alert(data.coord.lon);
          })
          .fail(function () {
               alert('error');
          });
     });
</script>

So einfach ist das :)

Answer 5

Variante: Ich habe ein Icon mit id="logo" oben links auf der Hauptseite; ein Spinner-Gif wird dann darüber gelegt (mit Transparenz), wenn Ajax funktioniert.

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