Foros del Web » Programación web » Javascript »

Como mostrar barra de progreso mientras se carga la pagina?

Estas en el tema de Como mostrar barra de progreso mientras se carga la pagina? en el foro de Javascript en Foros del Web. Buenos días a todos! Mi consulta es la siguiente: Tengo una página HTML con una mini-aplicacion que inventé para lo que necesito, super sencillita solo ...
  #1 (permalink)  
Antiguo 04/08/2010, 03:47
Avatar de joss23  
Fecha de Ingreso: noviembre-2009
Mensajes: 15
Antigüedad: 5 años
Puntos: 0
Como mostrar barra de progreso mientras se carga la pagina?

Buenos días a todos!

Mi consulta es la siguiente:

Tengo una página HTML con una mini-aplicacion que inventé para lo que necesito, super sencillita solo con HTML y JavaScript. El caso es que esta página tiene muchos layers (cada uno con una imagen) 'ocultos' desde un principio, y cuando se entra en la página en seguida se muestra todo el contenido inicial, por lo que parece que esté completamente cargada, sin embargo las imagenes de estos layers tarda un momento en terminar de cargarlas, y si se llama a uno de los layers antes de que su imagen se haya cargado, no aparece nada y da la sensación de que el sistema no funcione.

Para evitar esta mala impresión quiero poner una típica barra de progreso nada más entrar en la página, mientras se carga todo el contenido tanto visible como oculto, y cuando se complete la carga desaparezca. He estado buscando pero solo encuentro ejemplos para programas y aplicaciones mucho más avanzadas, o por lo contrario, scripts que dan el efecto de una de dichas barras que progresa hasta llegar al final, para decorar, sin que realmente se cargue nada.

Saben cómo podría hacerlo??

Muchas gracias de antemano!
  #2 (permalink)  
Antiguo 04/08/2010, 08:08
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.672
Antigüedad: 7 años, 10 meses
Puntos: 125
Respuesta: Como mostrar barra de progreso mientras se carga la pagina?

Hola

Tal y como yo lo veo tienes dos opciones, cargar todo el js al final del documentos, es decir justamente antes de la etiqueta </body>, con lo que parece que no se resolvería el problema o hacer una precarga de imágenes
Edito: Ahora se me ha ocurrido otra manera, creas una capa al 100% de la ventana y de nuevo con un script al final del archivo la ocultas

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />

Última edición por Adler; 04/08/2010 a las 09:25
  #3 (permalink)  
Antiguo 05/08/2010, 12:18
Avatar de joss23  
Fecha de Ingreso: noviembre-2009
Mensajes: 15
Antigüedad: 5 años
Puntos: 0
Respuesta: Como mostrar barra de progreso mientras se carga la pagina?

Hola Adler

Al final esta mañana antes de siquiera entrar en forosdelweb.com he encontrado de churro, buscando otras cosas, una página que funcionaba con lo que yo necesitaba. Así que indagando por el código fuente he visto que se trataba de algo tan sencillo como la tercera opción que me indicas, efectivamente si creas una capa al 100% y la ocultas justo antes de </body> tienes una barra de progreso "no simulada".

Muchas gracias por tu respuesta! Era justo lo que necesitaba :)
  #4 (permalink)  
Antiguo 13/10/2010, 11:02
Avatar de JALF  
Fecha de Ingreso: septiembre-2004
Ubicación: Cali - Colombia
Mensajes: 634
Antigüedad: 10 años, 2 meses
Puntos: 2
Respuesta: Como mostrar barra de progreso mientras se carga la pagina?

Cita:
Iniciado por joss23 Ver Mensaje
Hola Adler

Al final esta mañana antes de siquiera entrar en forosdelweb.com he encontrado de churro, buscando otras cosas, una página que funcionaba con lo que yo necesitaba. Así que indagando por el código fuente he visto que se trataba de algo tan sencillo como la tercera opción que me indicas, efectivamente si creas una capa al 100% y la ocultas justo antes de </body> tienes una barra de progreso "no simulada".

Muchas gracias por tu respuesta! Era justo lo que necesitaba :)
Hola, estoy interesado en la solución, podrías poner un pequeño código de ejemplo para guiarme por favor?

Salu2
__________________
Ubuntu User # 15554
http://dubaiphp.wordpress.com/ -Mi vida de desarrollo, juegos y algo más en un Blog-
  #5 (permalink)  
Antiguo 13/10/2010, 13:22
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.640
Antigüedad: 6 años, 5 meses
Puntos: 936
Respuesta: Como mostrar barra de progreso mientras se carga la pagina?

una capa con el width y el height al 100%. por otro lado con el evento onload invocas una función. en esta función, a la propiedad display le das el valor hidden
  #6 (permalink)  
Antiguo 13/10/2010, 13:27
Avatar de JALF  
Fecha de Ingreso: septiembre-2004
Ubicación: Cali - Colombia
Mensajes: 634
Antigüedad: 10 años, 2 meses
Puntos: 2
Respuesta: Como mostrar barra de progreso mientras se carga la pagina?

Cita:
Iniciado por IsaBelM Ver Mensaje
una capa con el width y el height al 100%. por otro lado con el evento onload invocas una función. en esta función, a la propiedad display le das el valor hidden
Sabes si onload es igual a .ready() en jQuery?
__________________
Ubuntu User # 15554
http://dubaiphp.wordpress.com/ -Mi vida de desarrollo, juegos y algo más en un Blog-
  #7 (permalink)  
Antiguo 13/10/2010, 13:39
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.640
Antigüedad: 6 años, 5 meses
Puntos: 936
Respuesta: Como mostrar barra de progreso mientras se carga la pagina?

sí, de ambas maneras puedes invocar una función cuando la página está cargada
  #8 (permalink)  
Antiguo 13/10/2010, 14:24
Avatar de JALF  
Fecha de Ingreso: septiembre-2004
Ubicación: Cali - Colombia
Mensajes: 634
Antigüedad: 10 años, 2 meses
Puntos: 2
Respuesta: Como mostrar barra de progreso mientras se carga la pagina?

Cita:
Iniciado por IsaBelM Ver Mensaje
sí, de ambas maneras puedes invocar una función cuando la página está cargada
ok gracias por la respuesta
__________________
Ubuntu User # 15554
http://dubaiphp.wordpress.com/ -Mi vida de desarrollo, juegos y algo más en un Blog-

Etiquetas: barra, carga, mientras, progreso
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:05.
SEO by vBSEO 3.3.2