Muestra la imagen que se carga mientras se realiza $ .ajax

Question

Me pregunto cómo mostrar una imagen que indica que se está ejecutando la solicitud asincrónica. Utilizo el siguiente código para realizar una solicitud asíncrona:

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

¿Alguna idea?

Answer 1

Usted puede, por supuesto, espectáculo antes de hacer la solicitud, y esconderlo después de que se complete:

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

por lo general prefiero la solución más general de unirse a los eventos globales ajaxStart y ajaxStop, de esa manera se presenta para todos los eventos ajax:

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

Answer 2

algo como esto:

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

Answer 3

Antes de su llamada o bien insertar la imagen de carga en un div/span algún lugar y luego en la función de eliminar el éxito de esa imagen. Alternativamente, usted puede configurar una clase CSS como carga que podría tener este aspecto

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

y luego asignar esta clase para un lapso/div y desactivarla en la función del éxito

Answer 4

siempre me ha gustado el BlockUI plugin: http://jquery.malsup.com/block/

Se le permite bloquear ciertos elementos de una página, o la página entera, mientras que una petición AJAX se está ejecutando.

Answer 5

Utilice el objeto ajax antes de enviar y completar funciones. Es mejor mostrar el gif desde adentro antes de Enviar para que todo el comportamiento esté encapsulado en un solo objeto. Tenga cuidado con la ocultación del gif con la función de éxito. Si la solicitud falla, probablemente aún quieras ocultar el gif. Para hacer esto, use la función Completar. Se vería así:

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

Answer 6

La "imagen" que las personas generalmente muestran durante una llamada ajax es un gif animado. Como no hay manera de determinar el porcentaje completado de la solicitud de ajax, los gifs animados utilizados son spinners indeterminados. Esta es solo una imagen que se repite una y otra vez como una bola de círculos de diferentes tamaños. Un buen sitio para crear su propia spinner indeterminado es el Código http://ajaxload.info/

Answer 7

HTML:

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

Código 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%; 
} 

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

}