Getting image width on image load fails on IE

Question

I have a image resizer function that resize images proportional. On every image load a call this function with image and resize if its width or height is bigger than my max width and max height. I can get img.width and img.height in FF Chrome Opera Safari but IE fails. How can i handle this?

Let me explain with a piece of code.

<img src="images/img01.png" onload="window.onImageLoad(this, 120, 120)" />

function onImageLoad(img, maxWidth, maxHeight) {
     var width = img.width; // Problem is in here
     var height = img.height // Problem is in here
}

In my highligted lines img.width don't work on IE series.

Any suggestion?

Thanks.

@Fatih Suggestion: don't mix JavaScript in your HTML like that (the onload attribute). Dynamically attach event handlers in JS alone. — Phrogz
– Phrogz, Commented Dec 17, 2010 at 16:22
I have find the problem. Stupid IE cannnot calculate display: none; image's width and height. I have set images visibility: hidden; then everything worked but until images load horizontal and vertical scroll bars is seeing. — Fatih Acet
– Fatih Acet, Commented Dec 17, 2010 at 22:10

izb · Accepted Answer · 2013-07-25 13:57:21Z

22

Don't use width and height. Use naturalWidth and naturalHeight instead. These provide the image unscaled pixel dimensions from the image file and will work across browsers.

answered Jul 25, 2013 at 13:57

izb

52.2k40 gold badges120 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jack Over a year ago

IMHO, This is the best answer on the page and should be the accepted answer.

kfriend Over a year ago

In IE 8, you can get the natural width by creating an Image instance, setting the src to the desired image, and grabbing that instance's dimensions:

function onImageLoad(img, maxWidth, maxHeight) {     var ghost = new Image();     ghost.src = img.src;     var width = ghost.width;     var height = ghost.height     ... }

m4js7er · Accepted Answer · 2011-07-18 14:32:56Z

Man, I was looking for this for 2 days. Thanks.

I'm using jQuery, but it doesnt matter. Problem is related to javascript in IE.

My previous code:

var parentItem = $('<div/>')
   .hide();      // sets display to 'none'

var childImage = $('<img/>')
   .attr("src", src)
   .appendTo(parentItem)   // sets parent to image
   .load(function(){
      alert(this.width);  // at this point image is not displayed, because parents display parameter is set to 'none' - IE gives you value '0'
   });

This is working in FF, Opera and Safari but no IE. I was getting '0' in IE.

Workaround for me:

var parentItem = $('<div/>')
   .hide();

var childImage = $('<img/>')
   .attr("src", src)
   .load(function(){
      alert(this.width);  // at this point image css display is NOT 'none'  - IE gives you correct value
      childImage.appendTo(parentItem);   // sets parent to image
   });

McGarnagle · Accepted Answer · 2012-11-26 18:42:17Z

This is how I solved it (because it's the only js on the site I didn't want to use a library).

    var imageElement = document.createElement('img');
    imageElement.src = el.href; // taken from a link cuz I want it to work even with no script
    imageElement.style.display      = 'none';

    var imageLoader = new Image();
    imageLoader.src = el.href;
    imageLoader.onload = function() {
        loaderElement.parentElement.removeChild(loaderElement);
        imageElement.style.position     = 'absolute';
        imageElement.style.top          = '50%';
        imageElement.style.left         = '50%';
        // here using the imageLoaders size instead of the imageElement..
        imageElement.style.marginTop    = '-' + (parseInt(imageLoader.height) / 2) + 'px';
        imageElement.style.marginLeft   = '-' + (parseInt(imageLoader.width) / 2) + 'px';
        imageElement.style.display      = 'block';
    }

Fatih Acet · Accepted Answer · 2015-10-03 13:49:23Z

2

It's because IE can't calculate width and height of display: none images. Use visibility: hidden instead.

edited Oct 3, 2015 at 13:49

answered Nov 27, 2012 at 9:38

Fatih Acet

29.8k9 gold badges55 silver badges58 bronze badges

1 Comment

Scott Mitchell Over a year ago

FYI, the working sample/failed sample links result in HTTP 404 errors.

Phenomenal · Accepted Answer · 2016-04-23 21:24:42Z

1

Try

 function onImageLoad(img, maxWidth, maxHeight) {
   var width = img.width; // Problem is in here
   var height = img.height // Problem is in here
   if (height==0  && img.complete){
       setTimeOut(function(){onImageLoad(img, maxWidth, maxHeight);},50);
   }

 }

answered Apr 23, 2016 at 21:24

Phenomenal

92 bronze badges

Comments

Run CMD · Accepted Answer · 2010-12-17 15:43:25Z

0

    var screenW = screen.width;
    var screenH = screen.height;
    //alert( screenW );
    function checkFotoWidth( img, maxw )
    {
        if( maxw==undefined)
            maxw = 200;
        var imgW = GetImageWidth(img.src);
        var imgH = GetImageHeight(img.src);
            //alert(GetImageWidth(img.src).toString()); // img.width); // objToString(img));
        if (imgW > maxw || (img.style.cursor == "hand" && imgW == maxw))
        {
            if (imgW > screenW) winW = screenW;
            else winW = imgW;

            if (imgH > screenH) winH = screenH;
            else winH = imgH;

            img.width=maxw;
            img.style.cursor = "pointer";

            img.WinW = winW;
            img.WinH = winH;
            //alert("winW : " + img.WinW);
            img.onclick = function() { openCenteredWindow("Dialogs/ZoomWin.aspx?img=" + this.src, this.WinW, this.WinH, '', 'resizable=1'); }
            img.alt = "Klik voor een uitvergroting :: click to enlarge :: klicken Sie um das Bild zu vergrössern";
            //alert("adding onclick);
        }
    }

    function GetImageWidth(imgSrc) 
    {
        var img = new Image();
        img.src = imgSrc;
        return img.width;
    } 

    function GetImageHeight(imgSrc) 
    {
        var img = new Image();
        img.src = imgSrc;
        return img.height;
    }

answered Dec 17, 2010 at 15:43

Run CMD

3,0353 gold badges39 silver badges62 bronze badges

1 Comment

Run CMD Over a year ago

it's also best to first hide your image, then display it once you resized it. Otherwise you'll get flickering effects with large images.

Pointy · Accepted Answer · 2010-12-17 16:19:27Z

0

I'd try this:

function onImageLoad(img, maxWidth, maxHeight) {
   var width, height;
   if ('currentStyle' in img) {
     width = img.currentStyle.width;
     height = img.currentStyle.height;
   }
   else {
     width = img.width;
     height = img.height;
   }
   // whatever
}

edit — and apparently if I were to try that I'd learn it doesn't work :-) OK, well "width" and "height" definitely seem to be attributes of <img> elements as far as IE is concerned. Maybe the problem is that the "load" event is firing for the element at the wrong time. To check whether that's the case, I would then try this:

function onImageLoad(img, maxWidth, maxHeight) {
   var width, height;
   var i = new Image();
   i.onload = function() {
     width = i.width; height = i.height;
     // ... stuff you want to do ...
   };
   i.src = img.href;
}

edited Dec 17, 2010 at 16:19

answered Dec 17, 2010 at 16:04

Pointy

415k62 gold badges600 silver badges632 bronze badges

7 Comments

Fatih Acet Over a year ago

it returns "auto". But I need the exact width and height, I mean the dimensions

Pointy Over a year ago

Oh crap :-) Well, that's IE for you. Let me think about it for a sec.

Phrogz Over a year ago

How about offsetWidth/offsetHeight? I suspect those will work even with width/height return auto.

Fatih Acet Over a year ago

@Phrogz offsetWidth/offsetHeight returns 0

Phrogz Over a year ago

@Fatih That seems very broken then. Are the images surely loaded? I would personally hack it by adding a setTimeout(...,1) kicked off from the load event to give it one more chance to re-layout the page before asking for the dimensions.

|

Moe · Accepted Answer · 2014-07-23 13:57:13Z

-1

getDisplay().getImage().setUrl(imgURL);
final Image img = new Image(imgURL);
int w=img.getWidth();
int h=img.getHeight();

answered Jul 23, 2014 at 13:57

Moe

1976 bronze badges

1 Comment

Palpatim Over a year ago

The question is about JavaScript

Collectives™ on Stack Overflow

Getting image width on image load fails on IE

8 Answers 8

2 Comments

Comments

Comments

1 Comment

Comments

1 Comment

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

Comments

1 Comment

Comments

1 Comment

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related