Image swapping with correct dimensions

Question

Hi all,
Hovering over a row of thumbnails, I swap the full size photo following this code :
  var photo = new Image();
  photo.src = 'images/'+fileName; // parameter of the function
  console.log(fileName+' L= '+photo.width+' H= '+photo.height);
  sym.$('toile').attr({
      width: photo.width,
      height: photo.height,
      src: photo.src
The full size photo swaps, but retaining the dimensions of the first one (initially on the Edge stage).
Even more puzzling, as you can see in the following screen capture, sometimes I can get the correct photo.width and photo.height (even if it isn't correctly assigned to the 'toile' element), and sometimes those values are zero ! And I feel so lost that this seems random. Surely it is not and someone has an idea. Thank you.
Gil
PS : An idea just springing while writing. May be it has to do with loading delay, asking the width and height information before it is available ? Should I necessarily preload the images ?

Answer 1

So, preloading is part of the solution.
An associative array is used to store the twelve full size photos susceptible to be displayed when their thumbnail is hovered over :
var twelvePhotos = new Object();
Inside the loop that fills the row of thumbnails, each corresponding picture is also preloaded and pushed into the associative array :
var photo = new Image();
photo.src = 'images/'+series+index+'.jpg';
twelvePhotos[index] = photo;
Now the width and height are available and always traced by console.log() :
var photo = twelvePhotos[index];
console.log(fileName+' L= '+photo.width+' H= '+photo.height);
The image swap, but width and height still remain the same. I tried in vain :
sym.$('toile').attr({
      'width': photo.width,
      'height': photo.height,
      'src': photo.src
sym.$('toile').attr('width', photo.width);
sym.$('toile').attr('height', photo.height);
sym.$('toile').attr('src', photo.src);
sym.$('toile').attr('width', parseInt(photo.width));
sym.$('toile').attr('height', parseInt(photo.height));
sym.$('toile').attr('src', photo.src);
Clearly, I miss the good syntax. Anyone sees my mistake ?
Gil