Mensaje de carga de página en JavaScript

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 y no al revés.
Es muy importante que esté justamente a continuación de la etiqueta 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.

Página en proceso, por favor espere

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

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

Tags: