
10 3, 2010
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.
La función JavaScript que oculta el mensaje puede estar embebida en la misma página o en un fichero externo .js.
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.
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.
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
Septiembre 11th, 2007 a las 3:43 pm
Espero que te sirva de mucho
Diciembre 11th, 2007 a las 2:21 am
muy buena la pagina
Septiembre 24th, 2008 a las 8:15 pm
Excelente el artÃculo, funcionó todo OK. Gracias.
Saludos
Diciembre 9th, 2008 a las 2:31 pm
el ultimo codigo es php?No me funciona ese ultimo
Febrero 26th, 2009 a las 2:12 pm
no funka
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”;
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?
Abril 16th, 2009 a las 8:25 pm
Justo algo como buscaba. Simple y funcional. Gracias
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
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!
Noviembre 22nd, 2009 a las 1:54 am
hola como estas quien sos dame tu nombre hermoso
Noviembre 22nd, 2009 a las 1:55 am
contestame dele
Noviembre 22nd, 2009 a las 1:57 am
que paso