Preload de imagenes con barra de progreso...

farra · #1 (**permalink**) 28/01/2009, 06:03

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cargar Imagen</title>
<script language="JavaScript" type="text/javascript">
//////////// cargar ///////////////
function precargar()    { 
    var dibujos = new Array(precargar.arguments.length); 
    for (var i = 0; i < dibujos.length; i ++)    { 
        dibujos[i] = new Image(); 
        dibujos[i].src = precargar.arguments[i] 
    } 
    return dibujos; 
} 

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

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

//////////// cargar ///////////////

var imagenes; 
function continuar()    { 
    alert("Ok."); 
} 

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

function ini()    { 
    imagenes = new precargar("http://www.bitcircus.com/albums/avr/LoctiteGreen.jpg"); 
    cargando(); 
}  

</script>
</head>

<body onload="ini()"> 
<div style="position:relative; width: 100px; height: 20px; border: 1px" >
<div style="position:absolute; top: 0; left: 0; width:100%; height: 100%; background-color: blue" >
</div>
<div id="estado"
style="position:absolute; top: 0; left: 0; width: 1%; height: 100%; background-color: aqua" >
</div>
</div>

</body>
</html>

estoy tratando de hacer una barra de progreso, que muestre el porcentaje de carga de una imagen o pagina a medida que se carga...

pero no me funciona... cuando carga todo recien me muestra que cargo todo pero no hace el progreso porcentaje por porcentaje...

como puedo hacerlo?

farra · #2 (**permalink**) 28/01/2009, 06:07

algo asi como cuando abres una pagna en flash y te muestra una barra de progreso con un porcentaje arriba... y va a avanzando la barra a medida que carga la pagina, hasta que termina de cargar y muestra el contenido...

eso mismo quiero pero en javascript...

Adler · #3 (**permalink**) 28/01/2009, 07:01

Hola

Pruaba con esto

Suerte

caricatos · #4 (**permalink**) 28/01/2009, 11:13

Hola:

Las imagenes tienen el evento load que modifican el atributo complete... entonces hay dos formas de estudiar la carga de imágenes... una asincrona, esperando que se cargue la imagen y programando el evento load, y la otra forma es sincrona, consultando con cierta frecuencia el atributo complete... pero en ambos casos solo se puede saber si se ha vargado totalmente y nunca nos indica el porcentaje de cada imagen, por lo que el script que se refiere (en ambos casos) solo tiene sentido con más de una imagen... para solo una imagen me parece mejor tapar esa imagen con un reloj de arena o similar, y ocultar esa capa con el evento load, aunque si consideramos que nuestro visitante puede tener javascript desactivado, para solo una imagen no creo que interese su implementación.

Saludos

farra · #5 (**permalink**) 28/01/2009, 13:43

es una sola imagen la que quiero cargar, pero muy grande...

en realidad lo que quiero hacer es lo siguiente:
tengo un sistema lightbox implementado.. que al hacer click en la imagen se abre y muestra el relojito ese cargando... pero tarda mucho en cargar y no te dice cuanto falta, y cansa esperar asi...

entonces en ves de ese relojito quiero ponerle el progress bar con porcentaje...

farra · #6 (**permalink**) 29/01/2009, 05:42

hay paginas que detectan la velocidad de conexion... por ejemplo: http://www.upseros.com/testvelocidad.php

si detectamos la velocidad de conexion y sabemos el tamaño de la imagen que esta en nuestro server, podemos calcular cuanto tardaria en descargarse y en base a eso hacer una barra con porcentaje... claro que seria estimado... pero ya es algo....

alguien tiene una idea de como hacer esto?