Índice

Aplicaciones

1. Un icono de carga

En ocasiones, las consultas AJAX pueden ser lentas a la hora de cargar el archivo externo, en función de su tamaño, de la carga del servidor o de la calidad de la conexión.

Para evitar que el usuario se canse durante esos momentos de espera, el diseñador puede prever un pequeño icono que indique que la carga está en curso. Este icono es una imagen gif animada que aparece al inicio de la consulta y desaparece cuando la consulta termina con éxito.

El sitio ajaxload (http://www.ajaxload.info/) ofrece una serie impresionante de este tipo de iconos animados para descargarlos.

images/10_8_1_v41.png

Su interfaz permite elegir el tipo de animación (Indicator type), el color de fondo (Background color) y el color de la animación (Foreground color). El botón Generate it ! crea la imagen. El botón Download it ! le permite descargar el icono animado. No hay nada más sencillo: perfecto para no perder el tiempo creando estas imágenes de espera. Por supuesto, es gratuito.

Ejemplo

El archivo de partida simplemente incluye un botón y una caja destinada a mostrar el archivo cuando se carga.

images/10_8_1_v42.png

El documento HTML:

<!doctype html> 
<html lang="es"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery</title> 
<script src="jquery.js"></script> 
<script> 
    $(document).ready(function() { 
        $(’#boton’).click(function() {  ...