Cargar una imagen

Estoy interesado en saber si voy por el buen camino.
Coloque de fondo en una web una imagen de 750 x 656 pxl.
Para ello cree una tabla y en cada celda coloque una imagen parcial
del conjunto.
Cuando carga la página, la imagen va apareciendo parcialmente hasta llegar a verse en su totalidad.
Hay otras formas de realizar esta tarea con imágenes.
¿Dónde puedo interiorizarme?
A la espera de alguna respuesta.
Raul

1 respuesta

1
Respuesta de
Pues hombre, la imagen es algo grande, así que yo te recomendaría hacer una "barra de carga" un poco simple, pero así evitarías la espera y rizarías el rizo. Se trata de cubrir toda la página con una capa y en esa capa dibujar una barra. Cada porción de imagen rellenaría un porcentaje de la barra. Cuando todas estén cargadas, la barra marcara 100%, y desaparecería.
A ver si puedo hacerte un ejemplo para que te quede más claro, espero que sepas javascript, a mi me encanta para hacer este tipo de tonterías:
<html>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<div id="capaTapa" style="border:double 3px black; background-color:red; position: abolute; top:0px; left:0px;">
<table width="100%" height="100%" border="0">
<tr>
<td valign="middle">
<center>
<div id="barraFuera" style="border: solid 1px black; width:500px; height:21px;">
<div id="barraInterior" style="background-color: blue; position:relative; left:-250px;"></div>
</div>
<div id="info" style="position:relative; font-size:15px;">0%</div>
</center>
</td>
</tr>
</table>
</div>
<script language="javascript">
var bI=document.getElementById("barraInterior");
var info=document.getElementById("info");
contPorcentaje=0; //contador
function ponerWidth(porcentaje) { //porcentaje sera el porcentaje a añadir a la barra
contPorcentaje+=porcentaje;
porcentaje=contPorcentaje;
// 500px -> 100%
// x px -> porcentaje %
x=porcentaje*500/100;
bI.style.width=x;
bI.style.left=(-500/2)+(x/2) +1; //para que se mantenga siempre a la izquierda
info.innerText=contPorcentaje+"%";
if(contPorcentaje>=100) setTimeout('document.getElementById("capaTapa").style.visibility="hidden"', 1000); //un segundo cuando se cumple el 100% para ocultar
}
/*
Si la imagen no fraccionada ocupa 400kb y tienes 4 fracciones, cada cacho es 1/4 de 400Kb, esto es, 100Kb por porción
400 kb -> 100%
100 kb -> x %
x=25%
En cada porción el código debería incluir un evento onLoad="ponerWidth(25)" para que a la barra se añadan 25%:
<img src="porcion1.jpg" onload="ponerWidth(25)">
<img src="porcion2.jpg" onload="ponerWidth(25)">
<img src="porcion3.jpg" onload="ponerWidth(25)">
<img src="porcion4.jpg" onload="ponerWidth(25)">
*/
</script>
</body>
</html>
Añade un comentario a esta respuesta
Añade tu respuesta
Haz clic para o
Escribe tu mensaje