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??