Splash Screen en ASP.Net
Autor: S3rGy0 | Archivado en: ASP, General el día 27/Abr/2005
Algo que puede resultar muy útil para realizar la presentación de una página ó cuando se carga una página muy pesada es utilizar una Splash Screen ó página de presentación. En mi caso sólo las uso para poner un mensaje del tipo “Cargando, espere por favor…” cuando tengo que cargar una página muy pesada.
Esto era algo fácil de realizar en ASP, pero la cosa cambia en ASP.Net, ya que siempre carga primero el código servidor cuando se está cargando la página y por lo tanto no podemos colocar una capa con un mensaje en la parte cliente. Para poder realizar esto debemos usar Response.Flush(), cuya función es enviar al cliente el código servidor que hay almacenado en el Buffer. La cuestión es que se puede usar para cargar datos del cliente de la siguiente manera:
Se coloca al inicio del
una capita con un mensaje de espera:<body>
<div id=splashScreen style=…>
Cargando datos, espere por favor . . .
</div>
<% Response.Flush() %>
De esta manera antes que empiece la carga de la página se mostrará al usuario el contenido de la capa.
A continuación debemos ocultar la capa cuando termine la carga:
<script language=javascript>
document.getElementById(”splashScreen”).style.display=”none”;
</script>
</body>
Con este se mostrará el mensaje “Cargando datos, espere por favor” mientras se carga toda la página, incluyendo el procesamiento que se realice en el servidor.
Esto se puede embellecer con un gif animado o cualquier otra cosa que se nos ocurra.
S3rGy0.
Hermano. pues bien, funciona este script, pero la leyenda no desaparece despues de traer los datos.???que es lo que tengo que hacer, plis??
Pues si te fijas, al final del post te digo que tienes que colocar al final del <body> esto:
<script language=javascript>
document.getElementById(”splashScreen”).style.display=”none”;
</script>
</body>
Si te fijas lo que haces es, justamente antes de cerrar el cuerpo de la página, ocultar la capa donde se encuentra el mensajito.
Se coloca al final para que desaparezca cuando haya terminado de cargar la página.
Saludos.
Gracias amigo, ahora si funciona.
hola, a mí no me funciona….
He añadido todo lo que indicas y sólo veo la “capita” al finalizar el código del page_load de codebehind !!
¿¿??
alguna pista!!
¿Puedes avisarme por email si me respondes?
Gracias
Pues no sé que te puede pasar, lo único que te puedo decir es que la primera parte de código la añado justo después del <body> y antes del <form>. La segunda parte de código que indico la añado justo después de la etiqueta </body>.
Si quieres envíame el código HTML a mi correo e intentaré ayudarte.
Salu2.
Hola Buenas, a mi no me funciona, mi codigo es el siguiente:
=”JavaScript”>
document.getElementById(”splashScreen”).style.display=”none”;
=”JavaScript”>
document.getElementById(”splashScreen”).style.display=”none”;
Cuando quieras mostrar código HTML, no olvides sustituir los < y > por < ; y > ;, respectivamente.
No me ha llegado bien tu codigo pero de todas maneras sólo tienes que colocar la capa donde dice “Cargando datos, espere por favor…” justo detrás del body, a continuación un <% Response.Flush() %>, seguidamente pones el código que se ha de cargar tras el splash screen (en tu caso creo que es una tabla) y justo antes de cerrar el body ocultas la capa, para que una vez que este cargada se oculte la splash screen.
Si te fijas no se pone nada de la splash screen dentro del formulario, sino fuera.
Si no te funciona repasa el código y hazlo como te digo ya que no tiene mucha más historia.
Saludos.
Muchas gracias, funciona muy bien.
hola, hize la prueba con varios de estos codigos y si me funcionan pero necesito ayuda para hacerlo con una imagen, si alguien sabe como hacerlo porfavor posteelo. gracias
Lo unico que tienes que hacer es conseguirte una gif animado, y lo colocas entre las etiquetas div, de la siguiente forma:
Espero te sirva, y gracias a S3rGy0, muy util el codigo
Buenísimo!!!. Podrias decirme si se puede cargar un html en un div?? Gracias x adelantado.
Saludos, estoy intentando con el codigo para aparecer la capa con el mensaje cargando y no me funciona, aqui pongo todo mi codigo a ver si me ayudan, de antemano gracias!.
< %@ Page language="c#" Codebehind="Commerce_Associate_Panel.aspx.cs" AutoEventWireup="false" Inherits="ClubManager.Commerce_Associate_Panel" %>
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
onload=”Parse_Comments()”>
como puedo hacer esto pero en Dinamo?????
Que tal Sergio?, te escribo para ver si me puedes ayudar. Estoy colocando el código tal cual me indicas, y cuando carga la página por primera vez, sí que muestra el mensaje de espera por un par de segundos, pero el problema está cuando el servidor comienza a procesar peticiones, en este punto no muestra el mensaje y tengo entendido que has dicho que igual funciona cuando el servidor procesa peticiones. En mi caso nop :S
Solo muestra la típica barra azul en la barra inferior del internet explorer y sí que me interesa que igualmente muestra el mensaje cuando el servidor está procesando peticiones.
El código es el siguiente:
———————————-
Cargando datos, espere por favor . . .
— Resto del formulario y cuerpo –
document.getElementById(”splashScreen”).style.display=”none”;
———————————-
Espero me puedas ayudar,
Gracias
y para hacer que la imagen enimada se vea abajo de la pagina?