webentwicklung-frage-antwort-db.com.de

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

Ich frage mich nur, wie man ein Bild anzeigt, das anzeigt, dass die asynchrone Anfrage läuft. Ich verwende den folgenden Code, um eine asynchrone Anforderung auszuführen:

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

Irgendwelche Ideen?

93
Artjom Zabelin

Sie können es natürlich anzeigen, bevor Sie die Anfrage stellen, und es nach dem Abschluss ausblenden:

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

Normalerweise ziehe ich die allgemeinere Lösung vor, sie an die globalen Ereignisse ajaxStart und ajaxStop zu binden, sodass sie für alle ajax-Ereignisse angezeigt wird:

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

Verwenden Sie die Funktionen beforeSend und complete des ajax-Objekts. Es ist besser, das gif von insideSendSend anzuzeigen, damit das gesamte Verhalten in einem einzelnen Objekt eingeschlossen ist. Achten Sie darauf, das GIF mithilfe der Erfolgsfunktion auszublenden. Wenn die Anforderung fehlschlägt, möchten Sie das GIF wahrscheinlich trotzdem ausblenden. Verwenden Sie dazu die Funktion Complete. Es würde so aussehen:

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

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

}
14
sumityadavbadli

Das "Bild", das Leute normalerweise während eines Ajax-Anrufs anzeigen, ist ein animiertes GIF. Da es keine Möglichkeit gibt, den Prozentsatz der Fertigstellung der Ajax-Anforderung zu bestimmen, sind die verwendeten animierten GIFs unbestimmte Spinner. Dies ist nur ein Bild, das sich immer wieder wiederholt, wie ein Ball aus Kreisen unterschiedlicher Größe. http://ajaxload.info/ Eine gute Seite, um einen eigenen benutzerdefinierten unbestimmten Spinner zu erstellen.

7
jEremyB

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 Sie anzeigen möchten, während ajax Daten aus Ihrem Back-End-Code abruft, muss so sein.

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 */
}
3

Das BlockUI-Plugin 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.

3
matt

Fügen Sie vor Ihrem Anruf entweder das ladende Bild irgendwo in ein div/span ein und entfernen Sie dann dieses Bild bei der Erfolgsfunktion. Alternativ können Sie eine CSS-Klasse wie Loading einrichten, die so aussehen könnte

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

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

1
Vadim

Sie können ein Start- und Abschlussereignis für Jax hinzufügen. Dies ist eine Aufgabe, 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');
        });
0

etwas wie das:

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

**strong text**Set the Time out to the ajax calls
function testing(){
    
    $("#load").css("display", "block");
    setTimeout(function(){
    $.ajax({
             type: "GET",

          
             url:testing.com,
            
             async: false,
             
             success : function(response){
           
             alert("connection established");

              
            },
            complete: function(){
            alert("sended");
            $("#load").css("display", "none");
         
           },
            error: function(jqXHR, exception) {
                       alert("Write error Message Here");
                  },


       });
     },5000);


  }
  .loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
  }
  
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
<div id="load" style="display: none" class="loader"></div>
<input type="button"  onclick="testing()"  value="SUBMIT" >

0
Narendra Reddy