Getting Image size in Javascript not working the first time

Question

I am getting the image size using javascript, but it won't return the correct size until after I run it a second time. I wonder why this is. Here is my code:

   var img = new Image()
   img.src = src
   img.onLoad = alert(img.width);

This returns 0 sometimes, but after a couple times it returns the actual image width. How do I make it get the right size the first time? I thought this was the right way.

Please add the code. where you are calling the function from — Umesh Aawte, Jun 19 '12 at 05:27
You also must set `.onLoad` BEFORE you set `.src` or you will miss the `onload()` event in some circumstances in IE. — jfriend00, Jun 19 '12 at 05:28
possible duplicate of [How to get image size (height & width) using javascript?](http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript) — Wladimir Palant, Jun 19 '12 at 06:13

Trevor · Accepted Answer · 2012-06-19T05:36:32.313

6

The problem is you are calling alert directly instead of assigning it as a callback so it is called before the image is loaded. This is what you want to do:

var img = new Image();
img.onload = function() {
    alert(img.width);
};
img.src = src;

edited Jun 19 '12 at 05:36

answered Jun 19 '12 at 05:27

Trevor

9,518
2
25
26

You also need to put the `.onload` assignment before the `.src` assignment or it won't work properly in IE when the image is in the browser cache. – jfriend00 Jun 19 '12 at 05:38
@jfriend00 Intresting, did not know that. – Trevor Jun 19 '12 at 05:39

score 2 · Answer 2 · answered Jun 19 '12 at 05:28

2

Try

img.onload = function(){alert(img.width);}

instead of

img.onLoad = alert(img.width);

answered Jun 19 '12 at 05:28

+1 This is the correct answer. The original code was executing the `alert()` statement immediately and assigning its return value to `img.onload` which will obviously not do what was intended. – jfriend00 Jun 19 '12 at 05:29

score 0 · Answer 3 · edited May 23 '17 at 12:29

0

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

found the code from this link:-

How to get image size (height & width) using JavaScript?

edited May 23 '17 at 12:29

Community

1
1

answered Jun 19 '12 at 05:30

sandeep patel

436
4
16

score -1 · Answer 4 · answered Jun 19 '12 at 05:27

-1

Use the clientWidth property of the image element.

img.clientWidth;

answered Jun 19 '12 at 05:27

C0deH4cker

3,959
1
24
35

1

This has little to do with the actual issue. – jfriend00 Jun 19 '12 at 05:33

Getting Image size in Javascript not working the first time

4 Answers4