Ver Mensaje Individual
  #4 (permalink)  
Antiguo 18/04/2011, 06:33
Avatar de IsaBelM
IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: cargar imágen

yo no aprecio este problema que comentas. de cualquier modo, puedes mostrar un div con opacidad hasta que todo el contenido esté cargado. el css es mas o menos este
Cita:
#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;
top: 0px;
left: 0px;
}


#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%;
}
el js para hacer la precaga
Cita:
<script type="text/javascript">
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() {
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(
"./img1.png",
"./img2.png",
"./img3.png"
);

cargando();
}


window.onload = function() {ini();};
</script>
el html para mostrar el div con opacidad y una barra de cargando..
Cita:
<body>
<div id="loading">
<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>

resto de la web