jmarrdiaz
3/10/2016 - 1:16 PM

Cargando contenido AJAX con jQuery usando imagen de cargando

Cargando contenido AJAX con jQuery usando imagen de cargando

El ejemplo que voy a poner aquí es realmente sencillo, pero os servirá para captar la idea. Imaginad este marcado:

<button type="button" id="boton">Cargar</button>  
<div id="contenidoAjax">  
  <p>Si le das al botón, cargaré algo de contenido.</p>
</div>  

Veamos la parte de jQuery:

$('button#boton').on('click', function(e) {
  var $contenidoAjax = $('div#contenidoAjax').html('<p align="center" style="position: absolute; top: 0; bottom: 0; left: 600px; right: 0; margin: -20px;"><img src="images/loading.gif" /></p>');
  $.ajax({
    data: datos,
    url: 'recogida-de-datos.php',
    success: function(data) { // Aquí desaparece la imagen ya que estamos reemplazando todo el HTML del contenido de la div. 
      $contenidoAjax.html(data);
    }
  });
  e.preventDefault();
});