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

Wenn Sie keinen eigenen Code schreiben wollen, gibt es auch eine Reihe von Plugins, die genau das tun:

• https://github.com/keithhackbarth/jquery-loading
• http://plugins.jquery.com/project/loading

Answer 2

Wenn Sie vorhaben, bei jeder Serveranfrage einen Loader zu verwenden, können Sie das folgende Muster verwenden.

 jTarget.ajaxloader(); // (re)start the loader
 $.post('/libs/jajaxloader/demo/service/service.php', function (content) {
     jTarget.append(content); // or do something with the content
 })
 .always(function () {
     jTarget.ajaxloader("stop");
 });

Dieser Code verwendet insbesondere das jajaxloader-Plugin (das ich gerade erstellt habe)

https://github.com/lingtalfi/JAjaxLoader/

Answer 3

Mein Ajax-Code sieht so aus, in der Tat, ich habe gerade auskommentiert async: false Zeile und der Spinner zeigt sich.

$.ajax({
        url: "@Url.Action("MyJsonAction", "Home")",
        type: "POST",
        dataType: "json",
        data: {parameter:variable},
        //async: false, 

        error: function () {
        },

        success: function (data) {
          if (Object.keys(data).length > 0) {
          //use data 
          }
          $('#ajaxspinner').hide();
        }
      });

Ich zeige den Spinner innerhalb einer Funktion vor dem Ajax-Code an:

$("#MyDropDownID").change(function () {
        $('#ajaxspinner').show();

Für Html, habe ich eine Schriftart awesome Klasse verwendet:

<i id="ajaxspinner" class="fas fa-spinner fa-spin fa-3x fa-fw" style="display:none"></i>

Ich hoffe, es hilft jemandem.

Answer 4

Sie können jederzeit die Block UI jQuery-Plugin die alles für Sie tut, und es blockiert sogar die Seite von jeder Eingabe, während die Ajax geladen wird. Für den Fall, dass das Plugin nicht zu funktionieren scheint, können Sie über den richtigen Weg, es zu benutzen lesen in dieser Antwort. Sehen Sie sich das an.