Get image height inside hidden div

Question

I want to get the height / width of the image inside the hidden div divider, but .height() and .width() both return 0 (as expected).

 $('body').append('<div id="init"><img id="myimg" src="someimage.png" /></div>'); $('#init').hide(); $('#myimg').height(); // == 0 $('#myimg').width(); // == 0 

How can I get the correct height / width of the image? I need this to make some decisions :-)

Regards, Biggie

Answer 1

This is because the image has not been uploaded yet .....

 $('body').append('<div id="init"><img id="myimg" src="something.png" /></div>'); $('#init').hide(); $('#myimg').bind("load",function(){ alert(this.height) //works })​ 

heres test: http://jsfiddle.net/WMpSy/

Answer 2

I just came across a solution for this, what you do, instead of relying on jQuery to do it for you. Instead, get the javascript element and pull out the height of the element itself, as shown below:

 var img = hiddenDiv.children('img'); var imgHeight = img.get(0).height; var imgWidth = img.get(0).width; 

The jQuery get(0) method allows us to get the basic DOM element and, interestingly, the dimensions of the DOM elements do not change.

One point, but for performance reasons, you need to cache img.get(0) if you plan to use it more.

jQuery get method documentation

Answer 3

You cannot hide it if you want the correct height and width, but you can move it so that it is off the screen and thus effectively hide. Try the following:

 var hiddenDiv = $('<div id="init"><img id="myimg" src="someimage.png" /></div>').appendTo('body').css({ 'position': 'absolute', 'top': -9999 }); var img = hiddenDiv.children('img'); img.height(); img.width(); 

Answer 4

Make the div temporarily visible to calculate height or hide the screen div off instead of using the display: None. I used the first approach and found it fast enough so you never saw an element.

Answer 5

I had a similar problem. The fact is that if the image or div containing the image has the style = "display: none", then its css height = 0. I found that the height () and width () functions gave incorrect values, for example 0! The solution for me was to ensure that the images have their own attributes, so even if they are hidden, the values ​​are still available. Therefore use:

$ ('# testImg'). attr ('height') and $ ('# testImg'). attr ('width') to get the height and width of the image.

Answer 6

you need to use find ()

 $('body').find('#myimg').width(); 

or

 $('body').find('#myimg').attr("width"); 

since you added it after loading the DOM

Answer 7

I'm not sure if you can do this using jQuery (or javascript in general). I had a similar problem with incomprehensible heights and widths when loading / hiding img . However, you can wait for the image to load, get the correct height and width, and then hide the parent ... like this:

 var height, width; $('#myimg').load(function() { height = $(this).height(); width = $(this).width(); $('#init').hide(); } 

Answer 8

Yes, because the image has not been uploaded yet, and this is my solution:

 $('<img src="My Image URL" />').appendTo('body').css({ 'position': 'absolute', 'top': -1 }).load(function() { console.log('Image width: ' + $(this).width()); console.log('Image height: ' + $(this).height()); $(this).remove(); }); 

Answer 9

it looks like you need to calculate the height and width of the image. If so, you are thinking too much about it.