Barra de progreso mientras carga una pagina web

[erfrancis]

tengo una web pesada y necesito que muestre una barra de progreso antes de que cargue la página entera, por favor, llevo buscando días pero no encuentro una simple barra de progreso con porcentaje que se muestre mientras se cargue la pagina, y que luego aparezca la pagina principal. Si teneis algo que realmente funcione lo agradezco mucho, gracias de antemano foreros!

[InKarC]

Le digo la teoría: Colocar una imagen grande blanca que tape todo (css width:100% etc) y unos divs que creen una barra para que se vaya llenando (si sabe css/html esto es muy facil) y luego colocar onload en cada imagen; con cada onload la barra se va desplasando un poco mas cerca del final (dividir la cantidad de onloads por la cantidad de pixeles que se tiene que mover) y cuando todos los onload se hayan disparado se desaparece la imagen grande blanca y la barrita.

[angelfcm]

Holas
Nunca he realizado esto y no se como hacerlo, también cuándo se sube un archivo he querido hacerlo. Yo creo que el compañero de arriba tiene un buen truco pero a mi me parece que hace que tarde un poco más la página y no creo que funcione como debería.
InKarC porfavor si puedes dejanos un ejemplo ya hecho, gracias!-

[caricatos]

Hola:

Un ejemplo similar tenemos en nuestras magníficas wiki-faqs: ¿Cómo hacer una precarga viendo el porcentaje de carga?, pero en vez de programar el evento de carga de las imágenes (onload) se chequea el atributo complete, que se pone verdadero (true) con la carga... el uso del evento puede ser buena idea, pero ya lo había probado y no siempre funciona correctamente, un ejemplo que se podría comprobar fácilmente recargando la página... al estar las imágenes ya cargadas, en algunos navegadores no funciona...

Como comentario adicional, el sistema funciona solo con imágenes, y no con otros medios (multimedia/iframes...)

El caso de las Faqs, se usa una capa en vez de una imagen (creo que es más adecuado... y con medidas distintas a las de las de la página, pero valdría el comentario de los estilos de InKarC.

Saludos

[IsaBelM]

esto es lo que yo hice a partir del código de caricatos

javascript

function precargar() {
var dibujos = Array.prototype.slice.call(arguments);
var urlimagenes = new Array();
for (var i = 0; i < dibujos.length; i ++) {
urlimagenes[i] = new Image();
urlimagenes[i].src = dibujos[i];
}
return urlimagenes;
}

function precargados(urlimagenes) {
var parciales = true;
for (var i = 0; i < urlimagenes.length; i ++)
parciales = (parciales && urlimagenes[i].complete);
return parciales;
}

function porciento(urlimagenes) {
var parciales = 0;
for (var i = 0; i < urlimagenes.length; i ++)
parciales += (urlimagenes[i].complete) ? 1 : 0;
return parseInt(100 * parciales / urlimagenes.length);
}




function continuar() {
alert('imagenes cargadas')
document.getElementById('loading').style.display = 'none';
}

function cargando() {
document.getElementById("estado").style.width = porciento(imagenes) + "%";
if (precargados(imagenes))
continuar();
else
setTimeout("cargando()", 100);
}

var imagenes;
function ini(){
imagenes = new precargar(
"./fondo_body.png",
"./min_ada.jpg",
"./tot_ada.jpg",
"./pre_carga.jpg",
"./pixel.gif",
"./sprite_header.jpg",
"./sprite_marcos.jpg",
"./footer.jpg"
);

cargando();
}


window.onload = function() {ini();};

CSS

#logo_cargando {
background-color: #282828;
text-align: center;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 1000;
}

#loading {
display: block;
background-color: #111;
text-align: center;
width: 100%;
min-height: 100%;
height: auto !important;
filter: alpha(opacity=80);
opacity: .80;
z-index: 1000;
position: fixed;
}

#loading img{
padding-top: 24px;
}

#barra_porcentaje {
font: bold 13px Helvetica, Arial, sans-serif;
text-align: center;
width: 100px;
height: 20px;
border: 1px solid #424141;
position: absolute;
top: 57%;
left: 47%;
}

HTML

<div id="loading"> <!-- precarga -->
<div id="barra_porcentaje">
<div style="position:absolute;top:0;left:0;width:100%;h eight: 100%;background-color:#282828"></div>
<div id="estado" style="position:absolute;top:0;left:0;width:1%;hei ght:100%;background-color: #333"></div>
</div>
</div> <!-- /precarga -->

si alguien tiene algo que decir, estoy preparada vuestras criticas

[angelfcm]

Hola IsaBelM, hay algunas cosas que no había visto, ¿podrías hacer el favor de explicarme que es lo que hace lo siguiente?

• Array.prototype.slice.call(arguments)
• urlimagenes[i].complete

Otra cosa:
Al parecer no dejaste de dónde podemos obtener las imágenes, queria buscar en google pero no se exactamente como debe de ser cada una, si pudieras dejarnos los link dónde podemos descargar esas imagenes porfavor.

Gracias, no lo he analizado bien ya que prefiero ver primero que funcióne y luego lo estudio jeje,

Saludos.

[IsaBelM]

Array.prototype.slice.call(arguments)

urlimagenes[i].complete urlimagenes es un array, i es el indice (la posición de cada imagen en el array) y complete es un atributo que caricatos ya explicó

en cuanto a las imágenes, no las puedes encontrar en ningún sitio que no sea mi pc. puedes usar la que tu tengas en tu equipo o cualquier otras que encuentres por la web

ya por último tendrás que confiar en mi palabra y arriesgarte a analizar bien el script, por que funciona bien

[Pablo Ayala]

Es mejor usar Jquery. Evitarias usar tantas lineas de codigo y funciones.
Checa este link:
http://jqueryui.com/demos/progressbar/

Espero que te sirva...

[caricatos]

Iniciado por Pablo Ayala

Es mejor usar Jquery. Evitarias usar tantas lineas de codigo y funciones.
Checa este link:
http://jqueryui.com/demos/progressbar/

Espero que te sirva...

¡Qué manía con las librerías...?

Evitar escribir unas "pocas" líneas, y añadir un peso de varios ks me parece absurdo.

Por cierto, el array podría ser perfectamente la colección document.images.

Saludos

[Pablo Ayala]

jajajajajaja.... bueno,

Nunca me había preocupado por unos cuantos kb, tal vez en lugar de criticar mi propuesta para la solución, como moderador del sitio deberías explicarnos cuanto pesa la librería y por que no usarla.

Este sitio considero que no es para criticar si no para compartir conocimientos.


Saludos Sr. Moderador.

[zerokilled]

deberías explicarnos cuanto pesa la librería y por que no usarla.

en serio, ya se ha hablado mucho sobre ese debate tanto aqui como en la web. deberias hacer una busqueda.

[Pablo Ayala]

bueno esta bien, lo acepto...
trate de ayudar sin consultar primero cuanto pesa y por que no conviene....

La proxima vez, antes de ayudar...
Primero leere por que usarla o por que no? cuanto pesas y si conviene o no?

Solo trate de compartir algo que me funciono a mi... y donde no vi que la pagina tarde mas de 18ms en cargar...

Saludos!!

[caricatos]

Iniciado por Pablo Ayala

bueno esta bien, lo acepto...
trate de ayudar sin consultar primero cuanto pesa y por que no conviene....

La proxima vez, antes de ayudar...
Primero leere por que usarla o por que no? cuanto pesas y si conviene o no?

Solo trate de compartir algo que me funciono a mi... y donde no vi que la pagina tarde mas de 18ms en cargar...

Saludos!!

Todos los que tenemos conexiones rápidas nos despreocupamos por algunas cosas que difícilmente llegan a quienes (y aún son muchos) no tienen la suerte de tener alta velocidad...

Y los foros pueden valer para criticar... pero lo que hemos tratado es código que yo mismo he escrito, así que lo que dices de compartir no parece ser un comentario del todo adecuado...

Saludos

[InKarC]

Compartir codigo que funciona bajo un framework es valido; excepto que el posteador original haya indicado que no debe/puede usar frameworks.

Vivo en Colombia; un pais tercermundista (que bajo los ojos de las personas en paises desarrollados vivimos en chosas y nos transportamos en burros) y aun asi aqui ya no existen conexiones de menos de 1 MB, asi que todo ese bla bla bla sobre "conexiones lentas" es completamente falso.

[zerokilled]

@inkarc,
para empezar nadie señalo pais alguno. personalmente el factor del peso yo no le doy mucha prioridad. un factor que considero mas importante aun es la cantidad de recursos que demanda las librerias. es obvio que en un computador las caracteristicas adversas no son tan notables comparados con otros dispositivos que no poseen el mismo nivel de rendimiento, por ejemplo un celular. la otra vez estaba revisando cuanta memoria ocupa tan solo cargar el framework jquery y estime que mas o menos requiere cerca de 15MB. esa cantidad es poco, pero de nuevo, es relativo de dispositivo a dispositivo. lo que me parece una chorrada mas aun es utilizar una libreria para solo usar una porcion bien pequeña de ésta cuando se puede hacer con pocas lineas (en su totalidad) de javascript.

nota: no quiero decir que las librerias son malas por naturaleza. soy del pensamiento que cada cual decida lo que hará pero que sea conciente a lo que se enfrenta.

[caricatos]

Iniciado por InKarC

Compartir codigo que funciona bajo un framework es valido; excepto que el posteador original haya indicado que no debe/puede usar frameworks.

Vivo en Colombia; un pais tercermundista (que bajo los ojos de las personas en paises desarrollados vivimos en chosas y nos transportamos en burros) y aun asi aqui ya no existen conexiones de menos de 1 MB, asi que todo ese bla bla bla sobre "conexiones lentas" es completamente falso.

Bueno, bueno... seguimos con la deducción al absurdo...

En España se puede contratar hasta 50 megas (no es la razón de la pregunta...), pero en mi caso son solo 3 megas, y en ocasiones las conexiones son inestables o simplemente lentas y creo que debe pasar en muchos sitios, así que me interesa mucho el peso de mis páginas...

Has pensado en cuántos internautas tienen accesos lentos... es válido que solo te interesen tus visitantes con adsl, así como hace aprox. un lustro la gran mayoría de páginas bastaba con que se viesen en el explorer para ser publicadas; pero considerando este caso concreto (podrías tener razón en otros casos), si con menos de 1 "K", y pocas líneas; y sobre todo fáciles de comprender e implementar, se consigue el objetivo deseado, no te parece que tiene poco sentido usar unas líneas más difíciles de comprender, y ese incremento del peso...

Saludos

[InKarC]

Los celulares son un mundo completamente aparte ya de por si muchos ni CSS muestran en lo absoluto asi que es bastante invalido compararlos con estos.

La mayoria de personas en latinoamerica + españa (en computadores de escritorio) tienen acceso a internet de 1MB o mas.

El procesamiento cuando maneja operaciones complejas muy probablemente esta mas optimizado en jQuery que en cualquier script que el promedio de desarrolladores podrian crear.

-------------------------------------

Volviendo al tema...

IsaBelM sabe mucho de javascript seguramente mas que yo pero a veces se complica demasiado para la resolucion de problemas. Aquí un código mucho mas corto de un cargador y lo probe en diferentes navegadores (usando el boton atras y todo eso) y funciona perfectamente.

Sip, usando jQuery... (aunque la parte mas importante (CORE) es puro javascript y no deberia ser dificil implantarlo en otros ambientes)

Código Javascript:

jQuery(function($){
        var items_cargar = $("img") //Seleccionas las imagenes a cargar 
        
        var moverse = $("#contendor-barra").width() / items_cargar.length;
        
        items_cargar.each(function(){ //CORE Procesar cada imagen para ver si ya esta cargada o si necesita un evento "onload"
            var pic=new Image();
            pic.src= this.src;
            if(pic.complete) cargada(); else {pic.onload= cargada; pic.onError = cargada };
        })
        
        function cargada(){ // Funcion que se ejecuta cada vez que carga una imagen (o si tira un error) o si estaba cargada desde antes
                $("#barra").animate({"left": "+=" + moverse}, 100, function(){
                        if($("#barra").css("left").replace("px","") >= 0){
                                $("#pantalla_blanca").hide()
                        }           
                })
        }
            
})
 

Si lo quieren ver funcionando y con todo el CSS/HTML aqui esta: http://jsfiddle.net/R6ce9/1/

[IsaBelM]

Iniciado por InKarC

Volviendo al tema...

IsaBelM sabe mucho de javascript seguramente mas que yo pero a veces se complica demasiado para la resolucion de problemas

querido InKarC, no entendiendo a qué viene este comentario. revisando el tema, veo que yo solamente di una opción y no he juzgado ni he entrado en el debate de jquery sí o no por que me es indiferente. lo que quiero decir es que no es necesario meter a nadie en medio para reforzar tu tesis. como esto es un debate que ya aburre, no estoy dispuesta dar pie a que se prolongue

[InKarC]

querido InKarC, no entendiendo a qué viene este comentario. revisando el tema, veo que yo solamente di una opción y no he juzgado ni he entrado en el debate de jquery sí o no por que me es indiferente

Querida IsaBelM; cuando critique tu código no me refería a si usaste o no jQuery ni nada relacionado, me refería a la lógica de programación para resolver este problema; aquí esta -casi- el mismo cargador que publique anteriormente en versión javascript puro (version en jsfiddle):

Código Javascript:

// ! Colocar este codigo antes del </body> para mayor efectividad!!
 var items_cargar = document.getElementsByTagName("img") //Seleccionas las imagenes 
        var moverse = document.getElementById("contendor-barra").offsetWidth / items_cargar.length;
       for(var x=0; x<items_cargar.length;x++){
            var pic=new Image();
            pic.src= items_cargar[x].src;
            if(pic.complete) cargada(); else {pic.onload= cargada; pic.onError = cargada };
        }
        function cargada(){ // Funcion que se ejecuta cada vez que carga una imagen
            var barra = document.getElementById("barra");
             var total_move = barra.offsetLeft+moverse
             barra.style.left = total_move + "px"
             if(barra.style.left.replace("px","") >= 0){                 
                document.getElementById("pantalla_blanca").style.display = "none";
             }
        }
 

Me dan 5 karmas positivos los novatos pero tu los borras todos con uno negativo... LOL

si alguien tiene algo que decir, estoy preparada vuestras criticas

[InKarC]

Valoración negativa en Barra de progreso... por caricatos que comentó 'No sabía que te interesaba eso del Karma...' el 05/05/2011 a las 16:41

Vaya, ahora esta mal hecho interesarse por el karma, y esto vino de un moderador! Asi que probablemente tiene la razon y meresco multiples calificaciones negativas por ese vil y egoista interes en mis venas!... lol

mmm... me acabo de dar cuenta que el codigo que critique en realidad era originalmente de caricatos... coincidencia? -_-'

[caricatos]

Hola:

El tema lo cerramos porque está resuelto y derivando en algo fuera de contexto.

Con respecto al Karma, el hecho de ser moderador no me quita el privilegio de premiar con Karma (o castigar si me lo pareciese) los mensajes y comentarios que a mi me gusten (o desagraden)

Saludos