Ver Mensaje Individual
  #5 (permalink)  
Antiguo 03/05/2011, 06:02
Avatar de IsaBelM
IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Barra de progreso mientras carga una pagina web

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

javascript
Cita:
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
Cita:
#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
Cita:
<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