Pero, y ¿para el propio HTML?

Pongo un ejemplo… en un html tenemos una lista muy muy larga de opciones (miles)… que tarda en ser cargada lo suyo…

Explicación: El código html se hace muy muy largo… y el /body no llega hasta pasados unos minutos (conexiones lentas) o un par de segundos (conexión fibra óptica a 100Mbt/s)

Otra posibilidad: el código html está siendo generado por php, lee de unos archivos y va entregando html poco a poco… como en procesar los archivos tarde algo… la carga del html se nota mucho…

Por ello, ¿cómo se pude poner una especie de barra de progreso para saber cúanto se ha cargado de la parte html? es decir (desde el body hasta el /body…

Bueno eso lo veo difícil o imposible… pero caray, lo que si se de antemano es la cantidad de elementos de la lista o el número de iteraciones de php en el bucle, con lo que en el head en un script de javascript si puedo saber cuántos “registros”, filas, capas, etc… va a tener la página…

Obviamente lo del onload del body no me sirve, porque salta cuando todo el html está cargado.

Explico esto: Una solución (mala porque no da el % de progreso) es colocar un gif animado que diga estoy cargando, espere… y en el onload ocultarlo, jeje, eso no permite indicarle al usuario por qué porcentaje de carga va el html.

Si uso un temporizador que altere el innerHTML de la capa para representar el %… la leche el navegador no actualiza la pantalla, si que salta el temporizador y éste si que que modifica el innerHTML, pero en pantalla no se ve el cambio.

Se me ocurre matar el problema a cañonazos, metiendo un iframe donde se muestre el progreso, pero me topo con otro problema… entre el body y el /body no está permitida la marca script (aunque los navegadores la interpreten bien)… así que tampoco me vale…

Nota: Ha de pasar el validador de XHTML 1.1 estricto y el de CSS 2.1 (obligación impuesta por los altos mandos, jeje)

Así que me veo con un problema muy gordo… que de momento no se reolver… o quizás si…

Solución: Matar a cañonazos… me explico:
-Se que es una burrada hacerlo así, pero al menos debería funcionar, jeje
-Se incrementa bastante el tamaño del html
-Queda muy guarro el fuente html

Ahí va:
-Tras cada iteración poner una capa encima de todas las anteriores, con el nuevo valor del %
-En el onload del body ocultar todas las capas, si todas, porque cada una tapa a todas las anteriores.

Ejemplo:
-Opción1
-Capa1 con el % =1
-Opción2
-Capa2 con el % =2 que tape a la Capa 1
…
-OpciónN
-CapaN con el % = N que tape a todas la Capa# anteriores
-Opción100
-Capa100 con el % = 100 que tape a todas la Capa# anteriores

Espero que la idea quede clara… ¿alguna alternativa a esta tremenda chapuza?

Encima para colmo algunos navegadores se niegan a mostrar nada hasta tener el 100% del html cargado, arrrgg!!! ¿cómo se soluciona esto sin usar frames ni iframes? aunque dudo que se pueda, quizás alguien sepa cómo.

De momento creo que la única solución pasa por usar un iframe con un timer que analice la existencia o no de ciertos “checkpoints” metidos de clavo en el html principal:

Por ejemplo si cada opción es una capa div con un id=”Opcion#” donde # va cambiando… en el timer se puede averiguar hasta cuál está cargado… intentanto acceder al id=”Opcion100″ y si falla al id=”Opcion99″, etc… queda mucho más limpio… pero requiere bien de un frameset o de un iframe…

Total es una pesadilla querer hacer una especie de barra de progreso que muestre el % cargado de la parte html de la página.

Espero haber dejado claro que hablo de mostrar al usuario el % de carga de la página, la parte entre body y /body, no hablo para nada del porcentaje de carga de cada imágen… de hecho la página podría carecer totalmente de imágenes… lo que necesito es mostrarle al usuario cuántas opciones están cargadas (en porcentaje me basta) de una especie de lista y hacerlo mientras el código html viaja del servidor al navegador cliente.

Para dejarlo más claro aún… imaginad que la página html tiene miles y miles de párrafos (marcas p /p)… el html es tocho de narices… varias decenas de megas… lo que interesa es mostrar un progreso (dentro de la ventana del navegador) que le indique al usuario cuánto se ha descargado ya, y que se vaya actualizando… cada párrafo tiene su id único.

Dicho de otra forma… imaginad que la página es el resultado de una consulta a una base de datos y se desea el listado entero…

aldhebaran prueba con window.location a mi me funciona sin problemas

Edu a mi no me causo problemas, estas seguro que esos div si los pusiste en tu pagina de diseño, eso es lo unico que se me ocurre que pueda fallar

Saludos a todos

tengo un problema, intentando poner tu barra de progreso en una aplicación ASP.NET no funciona, las instrucciónes:

divCompletado=document.getElementById(”barraCompletado”);
divPorcentaje=document.getElementById(”barraPorcentaje”);
divLeyenda=document.getElementById(”leyenda”);

devulven siempre null.

Alguna idea?

Muy bueno la dica, mas teria la possibilidad de carga imagenes indepediente? uno preload en cada imagenes?

Perdon por la demora en la respuesta.
Saludos.

Muchas gracias

Saludos.