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