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

Sie können nicht nur globale Standardwerte für Ajax-Ereignisse festlegen, sondern auch das Verhalten für bestimmte Elemente. Vielleicht reicht es aus, die Klasse zu ändern?

$('#myForm').ajaxSend( function() {
    $(this).addClass('loading');
});
$('#myForm').ajaxComplete( function(){
    $(this).removeClass('loading');
});

Beispiel CSS, um #myForm mit einem Spinner zu verstecken:

.loading {
    display: block;
    background: url(spinner.gif) no-repeat center middle;
    width: 124px;
    height: 124px;
    margin: 0 auto;
}
/* Hide all the children of the 'loading' element */
.loading * {
    display: none;  
}

Answer 2

Sie können einfach ein Ladebild demselben Tag zuweisen, auf dem Sie später den Inhalt mit einem Ajax-Aufruf laden werden:

$("#message").html('<span>Loading...</span>');

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

Sie können das span-Tag auch durch ein Bild-Tag ersetzen.

Answer 3

Beachten Sie, dass Sie asynchrone Aufrufe für Spinner verwenden müssen, um zu funktionieren (zumindest ist das, was meine nicht zeigen, bis nach dem Ajax-Aufruf verursacht und ging dann schnell weg, wie der Aufruf beendet hatte und entfernt den Spinner).

$.ajax({
        url: requestUrl,
        data: data,
        dataType: 'JSON',
        processData: false,
        type: requestMethod,
        async: true,                         <<<<<<------ set async to true
        accepts: 'application/json',
        contentType: 'application/json',
        success: function (restResponse) {
            // something here
        },
        error: function (restResponse) {
            // something here                
        }
    });

Answer 4

$('#loading-image').html('<img src="/images/ajax-loader.gif"> Sending...');

        $.ajax({
            url:  uri,
            cache: false,
            success: function(){
                $('#loading-image').html('');           
            },

           error:   function(jqXHR, textStatus, errorThrown) {
            var text =  "Error has occured when submitting the job: "+jqXHR.status+ " Contact IT dept";
           $('#loading-image').html('<span style="color:red">'+text +'  </span>');

            }
        });

Answer 5

Dies ist ein sehr einfaches und intelligentes Plugin für diesen speziellen Zweck: https://github.com/hekigan/is-loading