Visualizza loading image mentre $ .ajax viene eseguita

Question

Mi chiedo solo come mostrare un'immagine che indica che la richiesta asincrona è in esecuzione. Io uso il seguente codice per eseguire una richiesta asincrona:

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

Qualche idea?

Answer 1

È possibile, naturalmente, spettacolo prima di fare la richiesta, e nasconderlo una volta completata:

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

solito preferisco la soluzione più generale di legarsi agli eventi globali ajaxStart e ajaxStop, in questo modo si presenta per tutti gli eventi Ajax:

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

Answer 2

qualcosa di simile:

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

Answer 3

Prima la chiamata sia inserire l'immagine di caricamento in un div/span da qualche parte e poi sulla funzione successo rimuovere l'immagine. In alternativa è possibile impostare una classe CSS come carico che potrebbe assomigliare a questo

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

E quindi assegnare questa classe per un arco/div e chiaro nella funzione successo

Answer 4

mi è sempre piaciuto il BlockUI plugin: http://jquery.malsup.com/block/

Esso consente di bloccare determinati elementi di una pagina o l'intera pagina, mentre una richiesta AJAX è in esecuzione.

Answer 5

utilizzare le funzioni beforeSend e completa dell'oggetto Ajax. È meglio mostrare la gif dall'interno beforeSend in modo che tutto il comportamento sia incapsulato in un singolo oggetto. Fai attenzione a nascondere la gif usando la funzione success. Se la richiesta fallisce, probabilmente vorrai comunque nascondere la gif. Per farlo usa la funzione Completa. Sarebbe come questo:

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

Answer 6

Le persone "immagine" in genere mostrano durante una chiamata Ajax è una GIF animata. Poiché non c'è modo di determinare la percentuale di completamento della richiesta Ajax, le gif animate utilizzate sono spinner indeterminati. Questa è solo un'immagine ripetuta all'infinito come una palla di cerchi di varie dimensioni. Un buon sito per creare il proprio filatore indeterminato personalizzato è codice http://ajaxload.info/

Answer 7

HTML:

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

codice CSS:

.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%; 
} 

codice jQuery:

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

}