Ver Mensaje Individual
  #177 (permalink)  
Antiguo 28/03/2004, 16:16
Avatar de caricatos
caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 19 años, 9 meses
Puntos: 1284
179.- Precarga con barra de progreso

P: ¿Como hacer una precarga viendo el porcentaje de carga?

R: Para llevar el control de las imágenes que se cargan en memoria existe la propiedad "complete" que indica si están completamente cargadas.
Estas tres funciones sirven para ese control:

Código PHP:
function precargar()    {
    var 
dibujos = new Array(precargar.arguments.length);
    for (var 
0dibujos.length++)    {
        
dibujos[i] = new Image();
        
dibujos[i].src precargar.arguments[i]
    }
    return 
dibujos;
}

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

function 
porciento(dibujos)    {
    var 
parciales 0;
    for (var 
0dibujos.length++)
        
parciales += (dibujos[i].complete) ? 0;
    return 
parseInt(100 parciales dibujos.length);

La idea es hacer un chequeo del estado de carga (precargados) y mostrar el porcentaje (porciento) que es fácilmente aplicable al estilo "width" de una capa. Por ejemplo:

Código PHP:
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("img0.jpg",
        
"img1.jpg",
        
"img2.jpg",
        
"img3.jpg",
        
"img4.jpg",
        
"img5.jpg",
        
"img6.jpg",
        
"img7.jpg",
        
"img8.jpg"
    
);
    
cargando();

Donde pone continuar(), puede cambiarse el alert por cualquier otra cosa como por ejemplo una activación de un botón o un efecto rollover.

Y el código de la página tendría que tener un elemento con id="estado" para mostrar el porcentaje
Por ejemplo:

<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>

Se activaría con un evento como la carga de la página:
<body onload="ini()">

Última edición por Kaopectate; 24/05/2004 a las 15:04