Getting image width and height with jquery

Question

I have a very simple code, which annoyingly was working and for the life of me I can not see why it is now failing:

function imageSize(img){
  var theImage = new Image();
  theImage.src = img.attr('src');
  var imgwidth = theImage.width;
  var imgheight = theImage.height;

  alert(imgwidth+'-'+imgheight);
}

The "img" variable being passed is the img object, obtained from:

jQuery('img')
.each(function(){
    var imgsrc = jQuery(this);
    imageSize(imgsrc);
});

Well, what exactly seems to be the problem? Looks alright to me. Also, why are you using the full-blown word 'jQuery'? Compatibility issues? Why don't you just use '$'? — Elliot Bonneville
– Elliot Bonneville, Commented Mar 20, 2012 at 13:20
Might be worth mentioning that if the image isn't fully downloaded when this code runs, then the width and height will be returned as zero, or possibly some other incorrect value. — Blazemonger
– Blazemonger, Commented Mar 20, 2012 at 13:20
Detecting exactly when an image is fully loaded is surprisingly tricky, since the .load event won't fire if the image is pulled from cache. See this question for solutions to this. — Blazemonger
– Blazemonger, Commented Mar 20, 2012 at 13:23

Roland Mai · Accepted Answer · 2012-03-20 13:22:08Z

2

The image may not have loaded yet. So, try (untested):

function imageSize(img){
  var theImage = new Image();
  $(theImage).load(function() {
    var imgwidth = this.width;
    var imgheight = this.height;

    alert(imgwidth+'-'+imgheight);
  });
  theImage.src = img.attr('src');
}

answered Mar 20, 2012 at 13:22

Roland Mai

31.2k8 gold badges58 silver badges61 bronze badges

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

Comments

csharpnumpty · Accepted Answer · 2012-03-20 13:24:56Z

2

Ok - the previous answer I gave was invalid when I tested it on jsFiddle - I created this which does what you want though? Do you need to have the "new Image()" part? http://jsfiddle.net/R89Qr/3/ - gave the images some hardcoded dimensions...

I changed your code slightly, so that it does this:

 function imageSize(img){
  var theImage = new Image(); // ignoring this part when checking the image width/height
  theImage.src = img.attr('src');
  var imgwidth = $(img).width();
  var imgheight = $(img).height();

  alert(imgwidth+'-'+imgheight);
}

$('img').each(function(){
    var imgsrc = jQuery(this);
    imageSize(imgsrc);
});

edited Mar 20, 2012 at 13:24

answered Mar 20, 2012 at 13:19

csharpnumpty

3,7231 gold badge33 silver badges46 bronze badges

3 Comments

Blazemonger Over a year ago

That would be true if theImage was a jQuery object.

csharpnumpty Over a year ago

Yes - v.true, I made some alterations and added a fiddle to make it work.

Blazemonger Over a year ago

You're barking up the wrong tree. The non-jQuery JavaScript image object has width and height properties which should have been retrieved in the original code sample -- if the image was fully loaded at the time the code was run.

Engineer · Accepted Answer · 2012-03-20 13:20:37Z

1

You have to wait , till your image will be loaded , and then access to its sizes:

function imageSize(img){
  var theImage = new Image();
  theImage.onload = function(){
    var imgwidth = theImage.width;
    var imgheight = theImage.height;

    alert(imgwidth+'-'+imgheight);
  }
  theImage.src = img.attr('src');

}

answered Mar 20, 2012 at 13:20

Engineer

48.9k12 gold badges90 silver badges93 bronze badges

Collectives™ on Stack Overflow

Getting image width and height with jquery

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related