¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Cargando contenido AJAX con jQuery usando imagen de cargando

Hace ya un tiempo escribí un artículo sobre cómo cargar contenido con jQuery y AJAX y le dimos sentido en forma de menú de navegación. He estado observando las estadísticas de Google Analytics y hay gente que llega a la web buscando cómo añadir un texto de cargando, un gif animado, o cualquier otra cosa.

En este artículo vamos a ver cómo lograr este sencillo efecto y que, sin duda, añade un plus de usabilidad a la web ya que el usuario sabrá que hay alguna acción que se está realizando en la web.

Lo primero que vamos a hacer es hacernos con una imagen de carga que queramos colocar mientras se carga el contenido en nuestra div. Podemos conseguirlas en Ajaxload por ejemplo o, si sois unos artistas podéis haceros una propia. Si las imágenes no os gustan, siempre podéis poner algo de texto del tipo “Cargando…”

Cómo hacerlo

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>  

Supongamos que, cuando le demos al botón, queremos mostrar algo de información que obtengamos del usuario, como por ejemplo, una dirección de un local cercano al usuario (como vimos en este ejemplo). Veamos la parte de jQuery:

$('button#boton').on('click', function(e) {
  var $contenidoAjax = $('div#contenidoAjax').html('<p><img src="/imagenes/cargando.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();
});

Al hacer click, lo primero que hace el script es cambiar el contenido de la div por un párrafo que contiene la imagen de carga. En seguida, comenzamos con la petición AJAX. Es en la función gestora del evento success cuando, volvemos a cambiar el HTML de la div, haciendo así desaparecer la imagen.

Otra forma, quizá más óptima, es dejar la imagen ahí pero oculta. Al realizar la petición AJAX la mostraríamos haciendo algo así:

$('img.cargando').show();

Y luego la ocultaríamos con el método hide(). De esta manera, la imagen ya está cargada para el usuario y la verá en el momento en que comience la petición. Además, de esta forma podríamos tener un sitio fijo para la imagen que se fuera mostrando y ocultando en función de la actividad de la aplicación.

Edición

Tal y como indica Nazarí en los comentarios del artículo, podemos valernos de las funciones $.ajaxStart y $.ajaxStop para aplicar un efecto a toda la página.

Así, si quisiéramos que cada petición de la página, hiciera que se mostrara un gif animado, lo que tendríamos que hacer es crear una div en la que tuviéramos nuestra imagen y luego insertar este código en la página:

$("#cargando").on("ajaxStart", function() {
  // this hace referencia a la div con la imagen. 
  $(this).show();
}).on("ajaxStop", function() {
  $(this).hide();
});

Hay que tener en cuenta que de esta forma cualquier petición AJAX que se realice en la página, hará que esto aparezca. Es importante ya que puede haber ocasiones en las que no queramos que el usuario sepa que estamos haciendo algo. En caso de que queramos saltarnos esto en una petición AJAX en particular, deberemos establecer la opción global a false. Si quisiéramos hacerlo con la anterior sería algo así:

$.ajax({
  data: datos,
  url: 'recogida-de-datos.php',
  global: false,
  success: function(data) { 
    // Aquí desaparece la imagen ya que estamos reemplazando todo el HTML del contenido de la div. 
    $contenidoAjax.html(data);
  }
});

Si el artículo te pareció interesante, útil o incluso equivocado, por favor considera el dejar un comentario. ¡Lo apreciaré mucho!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!