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
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
Respuesta de derke
1
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 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>
Bárbaro, ahora, ¿es conveniente realizar una precarga de las imagen antes?
Sí, ese es el único sistema. Ademas es bastante fiable con respecto a resoluciones, ya que también podrías posicionar las imágenes con capas pero es algo más complicado. Lo mejor son las tablas, y si la imagen es grande y esta fraccionada, mejor que mejor para las conexiones más lentas.
Documentación sobre este tema no he encontrado, es algo demasiado concreto. Solo puedo decirte que en efecto, vas bien encaminado en tu proyecto.
Documentación sobre este tema no he encontrado, es algo demasiado concreto. Solo puedo decirte que en efecto, vas bien encaminado en tu proyecto.
