Foros del Web - Ver Mensaje Individual - 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?