Jairo Blanco

Blog de Jairo Blanco

Comentando tecnologías web.
Página principal » Mensaje de carga de página en JavaScript
« Tipos de plataformas web
Menu con lista horizontal con imágenes y texto centrado »

Mensaje de carga de página en JavaScript (1,318 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:
  1. <body onLoad="javascript:hideDiv('loadText');">
  2. <div id="loadText" style="position:absolute;left:300px;top:300px;width:300px;background-color:#D0CCCA;border-width:1px;border-color:#000000;" align="center">
  3.     <span style="font-family:Verdana;font-size:10px;font-weight:bold;color:#000000">P&aacute;gina en proceso, por favor espere</span>
  4. </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:
  1. //Descripcion: Función que oculta la capa de precarga.
  2. //Autor: Jairo Blanco
  3. //Web: www.jairoblanco.com
  4. //Comentarios: Esta función debe ser llamada en el evento Onload de la etiqueta body.
  5. //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.
  6.  
  7. function hideDiv(id)
  8. {
  9. document.getElementById(id).style.visibility = "hidden"; document.getElementById(id).style.display = "none";
  10. }

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.

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (1 votos, media: 4 de 5)
Loading ... 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

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

  1. 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.

  2. 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

  3. jairo Dice:
    Septiembre 11th, 2007 a las 3:43 pm

    Espero que te sirva de mucho

  4. albeto Dice:
    Diciembre 11th, 2007 a las 2:21 am

    muy buena la pagina

Dejar un comentario

XHTML: Puedes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>