开发者

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

开发者 https://www.devze.com 2023-03-30 19:36 出处:网络
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:

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: s开发者_运维百科ome 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:

  1. wait for load
  2. onload fired (if I comment it -- jQuery().load is fired).
  3. 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.


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();
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号