Preload de imagenes

[pcarvajal]

Tengo el siguiente código:

<script language="javascript">
funcion muestra(imagen)
var x;
x="<img src='" + imagen + "'>"
picture.innerHTML = x;
</script>

<p>
<a href="#" onclick="muestra('foto01.jpg')">foto01</a><br>
<a href="#" onclick="muestra('foto02.jpg')">foto02</a>
</p>
<div id="picture"></div>

Hasta ahi todo ok...
El problema esta en que si una imagen es demasiado grande se me descuadra el diseño de la pagina en pantalla.
Es posible cargar la imagen "por detras", reconocer su ancho y alto, y luego recien mostrarla??

Algo asi:

<script language="javascript">
funcion muestra(imagen)

//1. aqui deberiamos hacer el preload de la imagen
//2. y aqui deberia reconocer el ancho y alto
//3. aqui un "alert" con el ancho y otro "alert" con el alto
var x;
x="<img src='" + imagen + "'>"
picture.innerHTML = x;
</script>

<p>
<a href="#" onclick="muestra('foto01.jpg')">foto01</a><br>
<a href="#" onclick="muestra('foto02.jpg')">foto02</a>
</p>
<div id="picture"></div>

Me pueden hechar una manito con esos 3 puntos??

[txels]

y xq no haces una cosa? limitas tu el tamaño de la imagen y así no te descuadrará nunca...si le pones por ejemplo el ancho...de 150


<script language="javascript">
funcion muestra(imagen)

//1. aqui deberiamos hacer el preload de la imagen
//2. y aqui deberia reconocer el ancho y alto
//3. aqui un "alert" con el ancho y otro "alert" con el alto
var x;
x="<img src='" + imagen + "' width='150'>"
picture.innerHTML = x;
</script>

<p>
<a href="#" onclick="muestra('foto01.jpg')">foto01</a><br>
<a href="#" onclick="muestra('foto02.jpg')">foto02</a>
</p>
<div id="picture"></div>


así no te descuadraría nunca....