Ladebild anzeigen, während $ .ajax ausgeführt wird

Ich frage mich nur, wie ich ein Bild anzeigen soll, das anzeigt, dass die asynchrone Anforderung ausgeführt wird. Ich verwende den folgenden Code, um eine asynchrone Anforderung auszuführen:

$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  }
});

Irgendwelche Ideen?

Sie können es natürlich anzeigen, bevor Sie die Anfrage stellen, und es ausblenden, nachdem es abgeschlossen ist:

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

Normalerweise bevorzuge ich die allgemeinere Lösung, es an die globalen Ereignisse ajaxStart und ajaxStop zu binden. Auf diese Weise wird es für alle Ajax-Ereignisse angezeigt:

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

Verwenden Sie die beforeSend- und Complete-Funktionen des Ajax-Objekts. Es ist besser, das GIF von innen vor dem Senden anzuzeigen, damit das gesamte Verhalten in einem einzelnen Objekt zusammengefasst ist. Achten Sie darauf, das GIF mit der Erfolgsfunktion auszublenden. Wenn die Anforderung fehlschlägt, möchten Sie das GIF wahrscheinlich trotzdem ausblenden. Verwenden Sie dazu die Funktion Vollständig. Es würde so aussehen:

$.ajax({
    url: uri,
    cache: false,
    beforeSend: function(){
        $('#image').show();
    },
    complete: function(){
        $('#image').hide();
    },
    success: function(html){
       $('.info').append(html);
    }
});

HTML Quelltext :

<div class="ajax-loader">
  <img src="{{ url('guest/images/ajax-loader.gif') }}" class="img-responsive" />
</div>

CSS-Code:

.ajax-loader {
  visibility: hidden;
  background-color: rgba(255,255,255,0.7);
  position: absolute;
  z-index: +100 !important;
  width: 100%;
  height:100%;
}

.ajax-loader img {
  position: relative;
  top:50%;
  left:50%;
}

JQUERY Code:

$.ajax({
  type:'POST',
  beforeSend: function(){
    $('.ajax-loader').css("visibility", "visible");
  },
  url:'/quantityPlus',
  data: {
   'productId':p1,
   'quantity':p2,
   'productPrice':p3},
   success:function(data){
     $('#'+p1+'value').text(data.newProductQuantity);
     $('#'+p1+'amount').text("₹ "+data.productAmount);
     $('#totalUnits').text(data.newNoOfUnits);
     $('#totalAmount').text("₹ "+data.newTotalAmount);
  },
  complete: function(){
    $('.ajax-loader').css("visibility", "hidden");
  }
});

}

Das "Bild", das Menschen normalerweise während eines Ajax-Anrufs zeigen, ist ein animiertes GIF. Da es keine Möglichkeit gibt, den prozentualen Abschluss der Ajax-Anforderung zu bestimmen, sind die verwendeten animierten Gifs unbestimmte Spinner. Dies ist nur ein Bild, das sich immer wieder wiederholt wie eine Kugel aus Kreisen unterschiedlicher Größe. Eine gute Seite, um Ihren eigenen unbestimmten Spinner zu erstellen, ist http://ajaxload.info/

Ich denke, das könnte besser sein, wenn Sie Tonnen von $ .ajax-Anrufen haben

$(document).ajaxSend(function(){
    $(AnyElementYouWantToShowOnAjaxSend).fadeIn(250);
});
$(document).ajaxComplete(function(){
    $(AnyElementYouWantToShowOnAjaxSend).fadeOut(250);
});

HINWEIS:

Wenn Sie CSS verwenden. Das Element, das angezeigt werden soll, während Ajax Daten aus Ihrem Back-End-Code abruft, muss folgendermaßen aussehen.

AnyElementYouWantToShowOnAjaxSend {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh; /* to make it responsive */
    width: 100vw; /* to make it responsive */
    overflow: hidden; /*to remove scrollbars */
    z-index: 99999; /*to make it appear on topmost part of the page */
    display: none; /*to make it visible only on fadeIn() function */
}

Das BlockUIPlugin hat mir immer gefallen : http://jquery.malsup.com/block/

Sie können bestimmte Elemente einer Seite oder die gesamte Seite blockieren, während eine Ajax-Anforderung ausgeführt wird.

Fügen Sie vor Ihrem Anruf entweder das Ladebild irgendwo in ein div / span ein und entfernen Sie es dann in der Erfolgsfunktion. Alternativ können Sie eine CSS-Klasse wie das Laden einrichten, die möglicherweise so aussieht

.loading
{
    width: 16px;
    height: 16px;
    background:transparent url('loading.gif') no-repeat 0 0;
    font-size: 0px;
    display: inline-block;
}

Ordnen Sie diese Klasse dann einem span / div zu und löschen Sie sie in der Erfolgsfunktion

etwas wie das:

$('#image').show();
$.ajax({
    url: uri,
    cache: false,
    success: function(html){
       $('.info').append(html);
       $('#image').hide();
    }
});

Sie können ein Ajax-Start- und Abschlussereignis hinzufügen. Dies funktioniert, wenn Sie auf das Schaltflächenereignis klicken

 $(document).bind("ajaxSend", function () {
            $(":button").html('<i class="fa fa-spinner fa-spin"></i> Loading');
            $(":button").attr('disabled', 'disabled');
        }).bind("ajaxComplete", function () {
            $(":button").html('<i class="fa fa-check"></i> Show');
            $(":button").removeAttr('disabled', 'disabled');
        });

1. Erstellen Sie ein Ladeelement für z. B. ein Element mit id = example_load.
2. Blenden Sie es standardmäßig aus, indem Sie style = "display: none;" hinzufügen.

3. Zeigen Sie es jetzt mit der Funktion jquery show element direkt über Ihrem Ajax.

   $('#example_load').show(); $.ajax({ type: "POST", data: {}, url: '/url', success: function(){ // Now hide the load element $('#example_load').hide(); } });