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

Dazu gibt es mehrere Möglichkeiten. Mein bevorzugter Weg ist, eine Funktion an die ajaxStart/Stop-Ereignisse auf dem Element selbst anzuhängen.

$('#loadingDiv')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

Die Funktionen ajaxStart/Stop werden immer dann ausgelöst, wenn Sie einen Ajax-Aufruf tätigen.

更新情報 : Ab jQuery 1.8 heißt es in der Dokumentation, dass .ajaxStart/Stop sollte nur angebracht werden an document . Dies würde das obige Snippet in umwandeln:

var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

Answer 2

Für jQuery verwende ich

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  },
  success: function() {}
});

Answer 3

Sie können einfach die jQuery's .ajax Funktion und verwenden Sie deren Option beforeSend und definieren Sie eine Funktion, mit der Sie so etwas wie ein Lade-Div einblenden können und bei Erfolg dieses Lade-Div ausblenden können.

jQuery.ajax({
    type: "POST",
    url: 'YOU_URL_TO_WHICH_DATA_SEND',
    data:'YOUR_DATA_TO_SEND',
    beforeSend: function() {
        $("#loaderDiv").show();
    },
    success: function(data) {
        $("#loaderDiv").hide();
    }
});

Sie können jedes beliebige Spinning-Gif-Bild haben. Hier ist eine Website, die ein großer AJAX Loader Generator nach Ihrem Farbschema ist: http://ajaxload.info/

Answer 4

Wenn Sie Folgendes verwenden $.ajax() können Sie etwas wie dieses verwenden:

$.ajax({
  url: "destination url",
  success: sdialog,
  error: edialog,
  // shows the loader element before sending.
  beforeSend: function() {
    $("#imgSpinner1").show();
  },
  // hides the loader after completion of request, whether successfull or failor.             
  complete: function() {
    $("#imgSpinner1").hide();
  },
  type: 'POST',
  dataType: 'json'
});

Obwohl die Einstellung "beforeSend" genannt wird, ist ab jQuery 1.5 "beforeSend" wird unabhängig von der Art der Anfrage aufgerufen. d.h. Die .show() Funktion wird aufgerufen, wenn type: 'GET' .

Answer 5

Sie können das animierte Bild direkt vor dem AJAX-Aufruf in das DOM einfügen und es mit einer Inline-Funktion entfernen...

$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
  $("#myDiv").html('');
});

Dadurch wird sichergestellt, dass Ihre Animation bei nachfolgenden Anfragen mit demselben Frame beginnt (falls das wichtig ist). Beachten Sie, dass alte Versionen des IE pourrait Schwierigkeiten mit der Animation haben.

Viel Glück!