Mensaje de precarga de páginas Del mismo modo que en flash existe la precarga de películas también podemos hacer algo similar
en nuestras páginas de inicio. Esto es especialmente recomendable si nuestro servidor es algo lento (caso de algunos gratuitos) o si hay alguna imagen de gran tamaño que tarde bastante en cargarse. Este script muestra un sencillo mensaje haciendo una llamada a la paciencia del visitante que desaparecerá cuando termine de cargarse toda la página. Aquí encontrarás la demo y el código necesario para poder usarlo en tus páginas. Indice. 1.- Demo. La demo se abrirá en otra página. Es una página con el típico mensaje de bienvenida y una imagen
lo sufientemente grande para los propositos de la demostración. 2.- El código del script.En <HEAD> introduzca el siguiente código.
<script type="text/javascript">
function ocultaMensajeCarga(){
document.getElementById('mensaje_carga').style.display = "none";
}
</script>
<style>
#mensaje_carga{
width:330px;
height:120px;
z-index:100;
display : block;
position : absolute;
top : 30%;
left : 20%;
border : 1px solid black;
background-color : Yellow;
text-align : center;
}
</style>
El <BODY> debe empezar con el siguiente código.
<body onload="ocultaMensajeCarga()">
<div id="mensaje_carga">
<font size="-2"><b>[ESTE ES EL MENSAJE DE PRECARGA]</b></font><br><br>
<img src="ico_reloj.gif"><br>
<h3>Página cargándose... <br>Espere, por favor</h3>
</div>
3.- Comentarios.- La función que va a ocultar la capa del mensaje es ocultaMensajeCarga() que se ejecutará cuando se dispare el evento de página onload. Por eso es esencial, no olvidarse de poner <body onload="ocultaMensajeCarga()">
- La capa del mensaje, <div id="mensaje_carga">..., es importante (aunque no imprescindible) que se escriba justo después de la etiqueta body. Por otro lado, yo he puesto un ejemplo. Usted podrá poner lo que quiera (recordando que debe cargarse rápidamente, claro).
- El aspecto del mensaje (tamaño, colocación, colores, etc) se maneja en el identifidor #mensaje_carga en la etiqueta style
inicial. De nuevo, usted puede modificarla a su antojo con la única salvedad del línea z-index:100; que debe aparecer siempre.
|
MenúCategorías
Lo Último Mis programas Matemáticas Geometría Programación WEB Flash MX Variados |
