Wie zeige ich mit jQuery eine Besetztanzeige an?

Wie zeige ich an einer bestimmten Stelle auf einer Webseite eine sich drehende "Besetzt" -Anzeige an?

Ich möchte die Anzeige starten / stoppen, wenn eine Ajax-Anfrage beginnt / abgeschlossen wird.

Geht es wirklich nur darum, ein animiertes GIF ein- oder auszublenden, oder gibt es eine elegantere Lösung?

Sie können ein GIF einfach ein- / ausblenden, aber Sie können es auch in ajaxSetup einbetten, sodass es bei jeder Ajax-Anfrage aufgerufen wird.

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

Ein Hinweis ist, dass Sie, wenn Sie eine bestimmte Ajax-Anfrage ausführen möchten, ohne den Ladespinner zu haben, dies folgendermaßen tun können:

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

Auf diese Weise hat das vorherige $ .ajaxSetup, das wir durchgeführt haben, keinen Einfluss auf die Anforderung mit global: false.

Weitere Informationen finden Sie unter: http://api.jquery.com/jQuery.ajaxSetup

In der jQuery-Dokumentation wird Folgendes empfohlen:

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

Wo #loadingist das Element mit Ihrer Besetztanzeige?

Verweise:

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

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

• Darüber hinaus empfiehlt jQuery.ajaxSetupAPI ausdrücklich, Folgendes zu vermeiden jQuery.ajaxSetup:

  Hinweis: Globale Callback - Funktionen sollten mit ihrem jeweiligen globalen Ajax Event - Handler Methoden- gesetzt werden .ajaxStart(), .ajaxStop(), .ajaxComplete(), .ajaxError(), .ajaxSuccess(), .ajaxSend()-rather als innerhalb des optionsfür das Objekt $.ajaxSetup().

Ich neige dazu, ein IMG nur ein- oder auszublenden, wie andere angegeben haben. Ich habe eine gute Website gefunden, die "Laden von Gifs" generiert.

Link Ich habe es einfach in ein eingefügt divund standardmäßig display: none;ausgeblendet (CSS). Wenn Sie dann die Funktion aufrufen, wird das Bild angezeigt , sobald es vollständig ausgeblendet ist.

Ja, es geht wirklich nur darum, ein animiertes GIF ein- / auszublenden.

Ich habe es in meinem Projekt gemacht,

Erstelle ein Div mit einer Hintergrund-URL als GIF, das nichts anderes als ein Animations-GIF ist

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

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

Fügen Sie in Ihrem Ajax-Aufruf diese Klasse dem div hinzu, und entfernen Sie bei Ajax-Erfolg die Klasse.

es wird den Trick machen, der sitzt.

Lassen Sie mich wissen, wenn Sie etwas anderes brauchen, ich kann Ihnen mehr Details geben

Entfernen Sie im Ajax-Erfolg die Klasse

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

Um die Lösung von Rodrigo ein wenig zu erweitern: Bei häufig ausgeführten Anforderungen möchten Sie das Ladebild möglicherweise nur anzeigen, wenn die Anforderung länger als ein Mindestzeitintervall dauert. Andernfalls wird das Bild ständig angezeigt und verschwindet schnell

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

Ich habe es in meinem Projekt gemacht:

Globale Ereignisse in application.js:

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

"Laden" ist das Element zum Ein- und Ausblenden!

Referenzen: http://api.jquery.com/Ajax_Events/

Ich musste benutzen

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

Alter Thread, aber ich wollte aktualisieren, da ich heute an diesem Problem gearbeitet habe. Ich hatte keine Abfrage in meinem Projekt, also habe ich es auf die einfache alte Javascript-Art gemacht. Ich musste auch den Inhalt auf dem Bildschirm blockieren, also in meinem xhtml

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

in meinem Javascript

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