prova ad utilizzare l'evento:

.load()

la logica è, creo una finestra (div) di dimensioni x e y in overlay (sopra tutto il sito) che sia di default centrata nel browser (dimensioni INIZIALI FISSE) che presenti al suo interno un'oggetto (immagine/div o altro) che sia un segnaposto di caricamento. (con in background il tag dell'immagine OVVIAMENTE INVISIBILE con display:none)

una volta creato questo div si passa al caricamento dell'immagine quindi:

codice:
$("selettore immagine").load(function(){
   (questa funzione verrà chiamata solo al completo caricamento dell'immagine)
});
quindi all'interno della funzione di .load() inserirai per prima cosa la richiesta di avere le dimensioni dell'immagine caricata.

con esse ridimensionerai il DIV che hai creato prima con .animate, poi eliminerai il "loading..." segnaposto e renderai l'immagine visibile con un fadeIn.

P.s. ancora meglio puoi mettere il "segnaposto loading..." con posizionamento ABSOLUTE ed eliminarlo solo dopo aver caricato completamente l'immagine magari con un'overlay anche su di essa che si elimina con il segnaposto.

è più facile a dirsi che a farsi... (bisogna vedere se la logica funziona, non ho mai provato)


non ne sono certo ma penso che avrai bisogno anche di conosce l'evento .live()