En este artículo vamos a completar el ejemplo que veíamos sobre cómo mostrar un texto en una posición fija de la página mientras se carga para conseguir un pequeño efecto muy sencillo y vistoso.
Vamos a utilizar un temporizador para "animar" el texto "Cargando" haciendo que aparezcan poco a poco los 3 puntos suspensivos, luego desaparezcan, vuelvan a aparecer, etc.
Como vais a ver, el manejo de un timer en JavaScript es muy sencillo; ni punto de comparación con otros lenguajes. Existen sólo las siguientes dos funciones básicas para manejar un timer en JavaScript:
1 setTimeout(nombreFuncion, tiempoMilisegundos); 2 clearTimeout(timerID);
Con la primera función (línea 1) se arranca un temporizador durante el tiempo tiempoMilisegundos (en milisegundos). Una vez concluido este tiempo se ejecutará la función nombreFuncion. Esta función devuelve el identificador del timer.
Con la segunda función (línea 2) se puede eliminar el temporizador identificado por el timerID que nos había devuelto antes la función setTimeout.
Vamos a ver como siempre el código y después comentamos brevemente lo que hace. En color rojo aparece marcado lo que hemos añadido nuevo:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Test</title> 5 <script language="javascript" type="text/javascript"> 6 //<![CDATA[ 7 var textoCargando = "Cargando"; 8 var numeroPuntos = 1; 9 var maxPuntos = 3; 10 var timerID = 0; 11 var cargado = false; 12 var tiempo = 500; 13 14 function oculta() { 15 document.getElementById("cargando").style.display = "none"; 16 cargado = true; 17 clearTimeout(timerID); 18 } 19 20 function fTimer() { 21 var puntos = ""; 22 for(i=0;i<numeroPuntos;i++) { 23 puntos += "."; 24 } 25 if (numeroPuntos++ >= maxPuntos) { 26 numeroPuntos = 0; 27 } 28 document.getElementById("cargando").innerHTML = textoCargando + puntos; 29 if (!cargado) { 30 timerID = setTimeout("fTimer()", 500); 31 } 32 } 33 //]]> 34 </script> 35 <style type="text/css"> 36 #cargando { 37 padding-left:2px; padding-right:2px; background-color:#CC0000; color:#FFFFFF; font-weight:bold; 38 right:3px; top:3px; position:fixed; 39 } 40 </style> 41 </head> 42 <body> 43 <div id="cargando">Cargando</div> 44 <script language="javascript"> 45 timerID = setTimeout("fTimer()", 500); 46 </script> 47 1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> 48 11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br /> 49 21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br /> 50 31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br /> 51 41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br /> 52 </body> 53 </html>
En las líneas de la 7 a la 12 se declaran e inicializan una serie de variables que utilizaremos después en las funciones. En orden de aparición tenemos:
- El texto que aparece en la capa fija de la esquina superior derecha (sin puntos suspensivos). En este caso "Cargando".
- El número actual de puntos que se hay pintados detrás del texto "Cargando".
- El máximo número de puntos a pintar.
- El identificador del timer, necesitaremos guardarlo aquí para poder eliminarlo después.
- Un flag para no volver a iniciar el timer una vez que se ha llamado a la función para ocultar el texto "Cargando". Aunque en un principio no debería hacer falta, con algún navegador (no recuerdo cuál) no funcionaba sin utilizarlo.
- El tiempo en milisegúndos que le daremos al temporizador.
En las líneas 16 y 17 ponemos a verdadero el flag que indica que ya se ha cargado la página completamente y después eliminamos el temporizador actual. Las dos cosas están hechas en la función que se llamará cuando la página esté completamente cargada.
En la línea 45 inicializamos el temporizador: Cuando se cumplan 500 milisegundos se ejecutará la función fTimer.
En las líneas de la 20 a la 32 declaramos la función fTimer. Esta función calcula cuántos puntos le toca pintar después del texto "Cargando" y los pinta. Al final del todo, si la página no está cargada ya, vuelve a inicializar el temporizador.
Esto último es importante y además es diferente que en otros lenguajes. Cuando se ha cumplido el tiempo que le indicamos para inicializar el timer, se ejecuta la función que le habíamos indicado y el timer queda eliminado, para que se ejecute nuestra función de forma periódica hay que volver a inicializar otro temporizador de la misma forma que lo hicimos la primera vez.
Ahora podéis probar el código para ver cómo funciona el temporizador, pero todavía falta una cosa: Hay que añadir al body el siguiente código para que desaparezca el texto y se elimine el temporizador una vez que se ha cargado la página.
<body onload="Oculta()">
No os recomiendo añadirlo hasta que no hayáis comprobado cómo funciona el temporizador para que os de tiempo de verlo.