Hay páginas que nos quedan muy pesadas y demoran mucho en cargar. Una opción para que el usuario vea que el sitio esta cargando todavía es utilizar una máscara de precarga con Javascript. Para esto dentro del head de nuestra página debemos agregar el siguiente script:
| | <script type="text/javascript">
function overlay() {
elem = document.getElementById("overlay");
elem.style.visibility="hidden";
elem = document.getElementById("bodydiv");
elem.style.visibility="visible";
}
</script> |
En la etiqueta body de nuestra página debemos llamar a la función:
| | <body onload="overlay()">
|
Dentro del body de nuestra página, al principio debemos poner este div:
| | <div id="overlay" style="width:100%; height:100%; position: absolute; text-align:center;">
<asp:Image ID="imgCarga" runat="server" ImageUrl="~/Imagenes/ajax-loader.gif" />
<br />
Cargando...
</div> |
Facilmente personalizable por cada uno de ustedes para que se adapte más a su página.
Para crear imagenes de carga les recomiendo el sitio: AjaxLoad
Luego va todo el contenido del sitio:
| | <div id="bodydiv" style="visibility:hidden; text-align:center;">
Aca todo nuestro contenido.
</div>
|
Hasta aca ya tenemos la mascara pronta, ahora vamos a agregarle más funcionalidad. Lo que vamos a hacer es que la página nos muestre cuanto demoro en cargarse. Para esto vamos a agregar unas variables más al codigo Javascript y crear una nueva función, quedandonos el código dentro del head de la siguiente manera:
| | <head runat="server">
<title>PreCarga con Javascript</title>
<script type="text/javascript">
var startTime=new Date();
var responseTime = 'nulo';
function overlay() {
elem = document.getElementById("overlay");
elem.style.visibility="hidden";
elem = document.getElementById("bodydiv");
elem.style.visibility="visible";
}
function time() {
endTime=new Date();
responseTime =(endTime.getTime()-startTime.getTime())/1000;
document.getElementById('<%= lblTiempo.ClientID %>').outerText = "Tiempo en cargar: " +responseTime +" segundos.";
}
</script>
</head>
|
En la etiqueta del body debemos llamar a la nueva función y agregar el label lblTiempo al body de nuestro sitio:
| | <body onload="overlay();time();">
<form id="form1" runat="server">
<div id="overlay" style="width:100%; height:100%; position: absolute; text-align:center;">
<asp:Image ID="imgCarga" runat="server" ImageUrl="~/Imagenes/ajax-loader.gif" />
<br />
Cargando...
</div>
<div id="bodydiv" style="visibility:hidden; text-align:center;">
<asp:Label ID="lblTiempo" runat="server" Text="Tiempo en cargar: 0 segundos."></asp:Label>
</div>
</form>
</body> |
De esta forma ya tenemos completa nuestra máscara y sabemos el tiempo de carga de nuestra página.
Puedes descargar el ejemplo aquí.
Advertencias:
| | El navegador debe tener habilitado JavaScript |
Fuentes:
Libro Recomendado:
 | JAVASCRIPT: CONCEPTOS BASICOS Y AVANZADOS Este libro sobre JavaScript está dirigido a todos aquellos que desean aumentar la interactividad de sus sitios Web. El libro tiene dos objetivos: en primer lugar, dominar las bases de JavaScript para poder trabajar con los scripts más frecuentes en la red y, en segundo, descubrir el nuevo potencial de JavaScript cuando se utiliza con las hojas de estilo (CSS), el DHTML, AJAX o con bibliotecas como Prototype o Script.aculo.us. Una vez descrita la sintaxis de base, el libro se apoya en ejemplos significativos (gestión de formularios, del tiempo, de menús de navegación, autocompletación), para comentarlos y demostrar la omnipresencia de JavaScript en una arquitectura Web 2.0. El libro acompaña al lector a través de un recorrido que va de los principios de JavaScript hasta el descubrimiento de los conceptos más avanzados. Los ejemplos y los scripts citados en el libro se pueden descargar en esta página. |