«Cargando… Espere un momento por favor.»
Seguramente habréis visto en alguna ocasión un mensaje parecido a este al entrar en una página web, y os habréis fijado en que desaparece cuando todos los elementos de la página se han cargado. Si usáis GMail por ejemplo, seguro que habéis visto el texto «Cargando…» en más de una ocasión.
Este pequeño truco es muy útil, por ejemplo, para páginas que utilizan Ajax, ya que al no recargarse la página en ningún momento, conviene avisar al usuario de que se está haciendo algo para que no se ponga nervioso (por ejemplo esto se hace en GMail). También puede resultar bastante útil para páginas con muchas imágenes, o con imágenes muy pesadas, avisando al usuario una vez que se han cargado todas.
A continuación vamos a aprender a colocar ese texto fijo en la esquina superior derecha de la pantalla, al estilo GMail, y que permanezca fijo en esa posición aunque movamos la barra de desplazamiento vertical hacia abajo gracias al atributo position y a su valor fixed.
Os pongo a continuación el código de ejemplo.
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>Ejemplo</title> 5 <script language="javascript" type="text/javascript"> 6 //<![CDATA[ 7 function Oculta() { 8 document.getElementById("cargando").style.display = "none"; 9 } 10 //]]> 11 </script> 12 <style type="text/css"> 13 #cargando { 14 padding-left:2px; padding-right:2px; background-color:#CC0000; color:#FFFFFF; font-weight:bold; 15 right:3px; top:3px; position:fixed; 16 } 17 </style> 18 <!--[if lt IE 7]> 19 <style> 20 #cargando{ 21 position:absolute; 22 top: expression(3+document.documentElement.scrollTop+document.body.scrollTop); 23 } 24 </style> 25 <![endif]--> 26 </head> 27 <body> 28 <div id="cargando">Cargando</div> 29 1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> 30 11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br /> 31 21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br /> 32 31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br /> 33 41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br /> 34 </body> 35 </html>
La capa que contiene el texto "Cargando" (línea 28) está posicionada en la esquina superior derecha gracias al estilo #cargando (declarado en la línea 13), en particular a los atributos "right:3px; top:3px" y se mantiene fija en esa esquina aún moviendo la barra de desplazamiento gracias al atributo "position:fixed".
Los estilos declarados entre las líneas 18 y 25 sólo afectan a versiones de Internet Explorer anteriores a la 7 y aportan los ajustes necesarios para que este truco funcione en estos navegadores, ya que no interpretan el valor fixed del atributo position. La expresión de la línea 25 sólo funciona en el navegador de Microsoft (en cualquiera de sus versiones) y lo que hace es actualizar el atributo top con el desplazamiento de la barra de scroll en cada momento para conseguir el mismo efecto que con el fixed.
Para que tenga efecto este último atributo es importante que nuestro documento sea XHTML 1.0 válido y por esta razón debe comenzar con el código de la primera línea (línea 1). La razón de todos esos números (uno por línea) que tiene el ejemplo es que podáis mover la barra de desplazamiento y comprobar el efecto de este último atributo.
Si probáis el código, de momento la capa con el texto "Cargando" no desaparece una vez completada la carga. Así podréis ver cómo queda el efecto. Para hacer que desaparezca esta capa cuando la página se cargue añadiremos el atributo onload a la etiqueta <body> de la siguiente forma:
<body onload="Oculta()">
Gracias a esto, cuando el cuerpo del documento se haya cargado por completo, se ejecutará el método Oculta que pone el atributo display de la capa al valor none.
Para probar que funciona, os recomiendo que añadáis varias imágenes pesadas a la página para que tarde mas tiempo en cargar. De otra forma la página cargará probablemente demasiado rápido y no os dará tiempo de verlo.
