03/05/2011, 06:02
|
| Colaborador | | Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 4 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 |