Mensaje de carga de página en JavaScript (6,089 lecturas)

26 Julio, 2007 por jairo

Posiblemente alguna vez hayas querido introducir un mensaje de carga mostrando "Cargando..." para aquellas páginas que tardan más de lo normal en cargar. Habrás buscado en Internet ejemplos de códigos en JavaScript que parecen que a la hora de la verdad el mensaje o la imagen que nos indica que está cargando la página desaparece antes de que haya terminado de cargar la página.

Esto es debido a que la mayoría de los Scripts no están colocados en el lugar correcto o se hace un uso incorrecto de los eventos del documento.

El truco consiste en tener el mensaje visible desde un principio en una capa posicionada y ocultarlo cuando se produce el evento "Onload" del <body> y no al revés.
Es muy importante que esté justamente a continuación de la etiqueta <body> para que sea lo primero que carge la página web.

A continuación muestro el código a implementar en HTML y JavaScripty puedes ver una demo en www.hierroyaluminio.com

El formato del mensaje puede ser como desees, incluso se le puede añadir imágenes.

Texto Plano

HTML:

<body onLoad="javascript:hideDiv('loadText');">
<div id="loadText" style="position:absolute;left:300px;top:300px;width:300px;background-color:#D0CCCA;border-width:1px;border-color:#000000;" align="center">
<span style="font-family:Verdana;font-size:10px;font-weight:bold;color:#000000">Página en proceso, por favor espere</span>
</div>

La función JavaScript que oculta el mensaje puede estar embebida en la misma página o en un fichero externo .js.

Texto Plano

CODE:

//Descripcion: Función que oculta la capa de precarga.
//Autor: Jairo Blanco
//Web: www.jairoblanco.com
//Comentarios: Esta función debe ser llamada en el evento Onload de la etiqueta body.
//Abstente de llamar a la función desde un archivo .js mediante document.onload=hideDiv(id) puesto que no funcionará aunque puede ser más elegante.
function hideDiv(id)
{
document.getElementById(id).style.visibility = "hidden"; document.getElementById(id).style.display = "none";
}

Nota: si está ya cacheada la página puede que de la sensación de que no funcione correctamente, prueba a eliminar todos los archivos temporales de Internet y verás como funciona.

(4 votos, media: 4.75 de 5)

Loading ...

Imprimir

Esta entrada fue publicada en Javascript, Javascript
Puedes seguir todas las respuestas de esta entrada a través de RSS 2.0 feed.

del.icio.us:Mensaje de carga de página en JavaScript

digg:Mensaje de carga de página en JavaScript

furl:Mensaje de carga de página en JavaScript

Y!:Mensaje de carga de página en JavaScript

magnolia:Mensaje de carga de página en JavaScript

15 Respuestas para “Mensaje de carga de página en JavaScript”

Fernando Dice:
Julio 27th, 2007 a las 12:07 pm
Muy bien JAIRO, me gustó, sencillo y directo como debe ser… ya mismo reemplazo las mias por esta !!!

Gracias, te sigo leyendo.
JuanD Dice:
Agosto 2nd, 2007 a las 4:15 pm
Gracias!! muy bueno y facil, lo modifique a mi gusto y qdo re bien, t agradezco muhco!1

Saludos
jairo Dice:
Septiembre 11th, 2007 a las 3:43 pm
Espero que te sirva de mucho
albeto Dice:
Diciembre 11th, 2007 a las 2:21 am
muy buena la pagina
Martín Dice:
Septiembre 24th, 2008 a las 8:15 pm
Excelente el artículo, funcionó todo OK. Gracias.

Saludos
geo Dice:
Diciembre 9th, 2008 a las 2:31 pm
el ultimo codigo es php?No me funciona ese ultimo
jose Dice:
Febrero 26th, 2009 a las 2:12 pm
no funka
Jose Dice:
Marzo 14th, 2009 a las 12:37 am
por que utilizar estos dos estilos

document.getElementById(id).style.visibility = “hidden”;
document.getElementById(id).style.display = “none”;

no puede quedar nada mas con este

document.getElementById(id).style.display = “none”;
Jose Dice:
Marzo 14th, 2009 a las 12:37 am
por que utilizar estos dos estilos

document.getElementById(id).style.visibility = “hidden”;
document.getElementById(id).style.display = “none”;

no puede quedar nada mas con este

document.getElementById(id).style.display = “none”;

que diferencia hay entre .visibility y display?
leo Dice:
Abril 16th, 2009 a las 8:25 pm
Justo algo como buscaba. Simple y funcional. Gracias
Wolfgang Dice:
Septiembre 4th, 2009 a las 5:26 pm
Amigo Jairo, esto no me funciona en una página php que lee una tabla en postgres.
Qué debo hacer?
Gracias por tu ayuda
Ivan Dice:
Octubre 13th, 2009 a las 6:51 am
Hola Jairo! como estas? te hago una consulta, cual debe ser el nombre del archivo .js para que esto me funcione? Gracias por tu tiempo, un abrazo!
erica barroso Dice:
Noviembre 22nd, 2009 a las 1:54 am
hola como estas quien sos dame tu nombre hermoso
erica barroso Dice:
Noviembre 22nd, 2009 a las 1:55 am
contestame dele
erica barroso Dice:
Noviembre 22nd, 2009 a las 1:57 am
que paso

http://www.jairoblanco.com

Blog de Jairo Blanco

Categorias

Ultimos posts

Mensaje de carga de página en JavaScript (6,089 lecturas)

15 Respuestas para “Mensaje de carga de página en JavaScript”

Dejar un comentario