how to get the width and height of a loaded image ?

Hi everybody,

Clicking on any of the 26 letters of the alphabet, I display the 15 logos starting with the first brand whose initial is the clicked letter.

Logos have different dimensions, but I fail recovering them, so that they are displayed stretched or squeezed, retaining the width and height of the first 15 logos put on stage in the Edge source.

Both of the two console.log in the following code produce w= 0 h = 0 :

- just after assigning the src attribute ;

- in the callback function of the load.

$('.letter').on('click', function()

{

  // swap the 15 logo images

  for( var i = 0; i < 15; ++i)

  {

    var theLogo = sym.$( "logo" +(i +1));

    var iBrand = // compute the good index

    var radical = brands[ iBrand].logo;

    var filePath = 'images/' +radical +'.gif';

    var imLogo = new Image();

    imLogo.src = filePath;

    console.log( i +' ' +radical +' BEFORE w = ' +imLogo.width +'   h = ' +imLogo.height);

    theLogo

      .attr('src', filePath)

      .hide()

      .load(function()

      {

        console.log( i +' ' +radical +' AFTER w = ' +imLogo.width +'   h = ' +imLogo.height);

        $(this)

          .attr('width', imLogo.width)

          .attr('height', imLogo.height)

          .fadeIn();

      });

  }

});

Any idea ? Thanks

Gil