img.width and img.height inside $(img).load() and/or img.onload=... return rubish values in IE8

Question

I know this topic is discussed a lot, but I could not find any solutions which would work for me. So, my code is roughly:

 var img =me.images[curID]
 var f = function() {
      var i = $(img);
      img.onload = null;
      $(img).unbind('load');
      var iH = img.height; /*works for Firefox, Safari, Opera, Chrome*/
      var iW = img.width;
      if (jQuery.browser.msie) {
          /*nothing works*/
          iH = i.width(); /* returns 0*/
          iH = i.attr('height'); /*returns undefined*/
          iH = img.height; /*returns wrong 120:30 px instead of 1000:410 */
          /*once page is reloaded - everything is fine */
      }
 }

 src = img.src;
 if ( (!img.complete) ||  
       (typeof img.naturalWidth != 'undefined' && img.naturalWidth == 0)
     ) {  /*WAIT FOR LOAD*/
        img.src = "";
        $(img).load(f);
        img.onload = f;
        img.src = src;  
 } else { /*SHOW */
        f.apply(img);
 }

What am I doing wrong?

p/s/ the image is inside div which is faded, so I basically want to resize an image before fadeIn.

EDIT1: some info on my arrays:

....
this.slides = this.slidesContainer.children();
this.n = this.slides.length;
for (var i=0;i<this.n;i++) {
    var im = this.slides.eq(i).find('img:first')[0];    
    var sr = im.src;
    this.images[i]    = im;
    this.imagesSrc[i] = sr; 
}
...

EDIT2: I rewrote a code a little bit (added onload), so that now it fires everywhere (IE/FF/Opera/Safari/...) And the program flow (IE8) is the following:

wait for load
onload fired (if I comment it -- jQuery().load is fired).
inside f(): img.width = 120, img.height = 30 (it seems it's not loaded. correct width/height are 1000x410)

It's hard to say what triggers it, because it does not happen always, not even always when images are not cashed. But from time to time, I see those strange width/height.

EDIT3: there are some solution on how to get image loaded (here and here), in one .onload is used, in another - .load, I use both, so that should be fine even though the code might not be optimal and very neat.

This one? $(img).height() should work in all browsers once the image is loaded; if it doesn't, something very strange is going on. — El Yobo
Then you might want to file a bug against jQuery? You might want to see if the difference in sizes when you used img.height matches up to any padding or margin; IE uses a different box model, strange things happen that I've never really bothered to remember :) — El Yobo
@Neal that's array of img's (DOM, not jQuery). I added the code how I form them at the bottom of the question. — Denis

Naftali Naftali · Accepted Answer · 2011-08-26T14:25:28

If you are using jQuery Try using jQuery's way of getting the image.

Instead of var img =me.images[curID] Just do :

var img = $('img#imageID');

//get height:  
img.height()
//get width:
img.width();

img.width and img.height inside $(img).load() and/or img.onload=... return rubish values in IE8

1 Answers