Ajax Thumb Gallery: preload immagine

[gianis6]

Probabilmente ciò che sto per chiedere sarà stato discusso e ridiscusso in queste pagine
(ho fatto una ricerca ma non ho trovato una risposta al mio problema) .

Espongo brevemente:

ho una galleria di immagini (immagini a grandezza normale e relative thumbnails).
Nella galleria mostro tutte le thumbnails; ad ognuna è associato l'evento onclick che richiama una funzione javascript che ha il compito di:

1) effettuare una chiamata AJAX per recuperare le informazioni relative alla singola foto (autore, descrizione, etc..),

2)mostrare la relativa immagine a grandezza naturale della relativa thumb cliccata.

3) dare un effetto fade alla immagine che deve essere mostrata.

per i punti 1) e 3) non ho nessun problema.
non come so sviluppare nel giusto modo il punto 2, ovvero vorrei che l'effetto fade all'immagine iniziasse solo quando l'immagine è stata effettivamente caricata.

io per ora ho ovviato così (posto il codice):

<script>

function changeImage(id_immagine)
{

ajaxCall(id_immagine);

obj=document.getElementById('big-image');
obj.src='images/'+id_immagine+'.jpg';

effettoFade(obj);
}
</script>

[img]images/1.jpg[/img] 

io ho effettua banalmente un cambio dell'attributo src dell'immagine. io vorrei invece fare un preload e eseguire la funzione effettoFade() solo quando l'immagine è stata caricata.

qualcuno sa aiutarmi o fornirmi qualche link a riguardo?
grazie mille per l'attenzione

[artorius]

ammesso che la chiamata AJAX e le altre funzioni siano giuste, fai:

function changeImage(id_immagine)
{
   ajaxCall(id_immagine);

   var img = new Image();
   img.onload = function(){
      obj=document.getElementById('big-image');
      obj.src=img.src;
      effettoFade(obj);
   }

   img.src='images/'+id_immagine+'.jpg'
} 

[gianis6]

grazie, proverò la tua soluzione il prima possibile