Mostrar imagen de carga mientras se realiza $ .ajax

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

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

¿Algunas ideas?

Por supuesto, puede mostrarlo antes de realizar la solicitud y ocultarlo 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 vincularlo a los eventos globales ajaxStart y ajaxStop, de esa manera se muestra para todos los eventos ajax:

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

Utilice las funciones beforeSend y complete del objeto ajax. Es mejor mostrar el gif desde adentro antes de enviar para que todo el comportamiento quede encapsulado en un solo objeto. Tenga cuidado al ocultar el gif utilizando la función de éxito. Si la solicitud falla, probablemente querrá 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);
    }
});

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

}

La "imagen" que la gente suele mostrar durante una llamada ajax es un gif animado. Dado que no hay forma de determinar el porcentaje completo de la solicitud ajax, los gifs animados utilizados son hilanderos 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 propio spinner indeterminado personalizado es http://ajaxload.info/

Creo que esto podría ser mejor si tiene toneladas de llamadas $ .ajax

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

NOTA:

Si usa CSS. El elemento que desea que se muestre mientras ajax obtiene datos de su código de back-end debe ser así.

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

Siempre me gustó el BlockUIcomplemento: http://jquery.malsup.com/block/

Le permite bloquear ciertos elementos de una página, o toda la página mientras se ejecuta una solicitud ajax.

Antes de su llamada, inserte la imagen de carga en un div / span en algún lugar y luego en la función de éxito elimine esa imagen. Alternativamente, puede configurar una clase css como carga que podría verse así

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

Y luego asigne esta clase a un span / div y límpielo en la función de éxito

algo como esto:

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

Puede agregar inicio de ajax y evento completo, esto es un trabajo para cuando hace clic en el botón de evento

 $(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. Cree un elemento de carga para, por ejemplo, un elemento con id = example_load.
2. Escóndelo por defecto agregando style = "display: none;".

3. Ahora muéstrelo usando la función jquery show element justo encima de su ajax.

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