jQuery getting image width/height loaded within a container

Question

I'm working with a plugin that requires me to get the width and height of the image, after it's loaded, regardless of how the dimensions of the image were determined.

<img src=".." width="500" height="500" />                <!-- works fine -->
<img src=".." style="width: 500px; height: 500px;" />    <!-- works fine -->
<img src=".." width="500" />                             <!-- only gives me width -->
<img src=".." style="width: 500px;" />                   <!-- only gives me width -->
<img src=".." style="width: 500px; height: auto;" />     <!-- only gives me width -->
<img src=".." />                                         <!-- doesn't work at all -->

I have tried loading the image and getting its dimensions after but i've only been able to get the image's actual size and not the size at which it is display on the page.

The code im using to get the width/height:

img.innerWidth();

I Have also tried:

$('<img/>').hide().attr('src',img.src).load(function() {
    img.Owidth = $(this).width();
    img.Oheight = $(this).height();
}).appendTo($('body'));

And:

$("<img/>").attr("src", img.attr("src")).load(function() {
   img.width = this.width;
   img.height = this.height;
});

Which do a fine job at getting me the original size of the image, but not the size of when it's loaded and displayed.

The plugin or your code must be grabbing the width attribute, rather than finding the width of the element. — Andy, Nov 16 '12 at 12:58
[Take a look at this](http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome) — Malkus, Nov 16 '12 at 13:02
Is there a particular plugin you are using to load the images? A fiddle may also be helpful — Malkus, Nov 16 '12 at 13:08
@MikeB, I'm not using a particular plugin to load the images, but rather that im working on making a plugin that requires me to get the dispay width and height of the images. I'll get to work on a fiddle. — Joey, Nov 16 '12 at 13:11
[This works](http://jsfiddle.net/hxGPd/) for me in IE and Chrome (latest version) http://jsfiddle.net/hxGPd/ What version of jquery are you using? — Mario S, Nov 16 '12 at 13:22

Joey · Accepted Answer · 2012-11-16T14:20:08.443

1

My solution

img.clone().load(function() {
    img.Dwidth = $(this).width();
    img.Dheight = $(this).height();
}).appendTo(img.parent()).hide();

To get the display dimensions, in my particular case, I had to clone the element, reload it and get the dimensions.

edited Nov 16 '12 at 14:20

answered Nov 16 '12 at 14:02

Joey

1,664
3
19
35

score 0 · Answer 2 · answered Nov 16 '12 at 13:10

0

you should use jQuery width or height to get calculated and also if the item is visible you always get 0. if you update the code like below it should work.

$('<img/>').attr('src',img.src).load(function() {
    img.Owidth = $(this).width();
    img.Oheight = $(this).height();
}).appendTo($('body')).hide();

as you can understand, if you have used $(this).width() instead of this.width in second block it should work.

answered Nov 16 '12 at 13:10

Onur Topal

3,042
1
24
41

Unfortunately, this is not the case and it doesnt work. Also, this gives me the original image dimensions and not those of an image displayed within a container or that only has a width value defined, for example. – Joey Nov 16 '12 at 13:13
what do you mean by "when it's loaded and displayed.". This function should give dimension of the image but if you have another element which displays the image different width or height (by attr or CSS) you should use $().width() on that object. – Onur Topal Nov 16 '12 at 13:20
http://joeyvo.me/lensview/ I added your code and all though it seems to be working fine in the fiddle, it isn't doing it in my plugin. – Joey Nov 16 '12 at 13:41

score 0 · Answer 3 · answered Sep 11 '15 at 13:42

0

You will get the size from the image, when you load your script with the $(window).load function.

 $(window).load(function(){
    console.log($('img').width());
});

answered Sep 11 '15 at 13:42

Vmadmax

94
3
8

score 0 · Answer 4 · answered Oct 12 '15 at 06:52

0

var getheight = function () {
var img = document.getElementById("pic");
var img_width = img.clientWidth;
}

Call this function after the image gets loaded . The clientWidth attribute will give you the image size after it gets loaded

answered Oct 12 '15 at 06:52

AbiSivam

419
1
6
17

jQuery getting image width/height loaded within a container

4 Answers4