Get height of image inside a hidden div

Question

i want to to get the height/width of an image inside a hidden div-containter, but .height() and .width() both returns 0 (like 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 it to make some decisions :-)

Best regards, Biggie

Answer 1

I just ran across the solution for this, what you do is instead of rely on jQuery to do this for you. Instead, get the javascript element and get the height off of the element itself, as follows:

var img = hiddenDiv.children('img');

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

The jQuery method get(0) allows us to get at the underlying DOM element and interestingly enough, the DOM element dimensions don't change.

One note though, for performance reasons, you will want to cache the img.get(0) if you plan on using it more.

jQuery get method documentation

Answer 2

Its because the image has not loaded yet.....

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

$('#myimg').bind("load",function(){
    alert(this.height) //works
})​

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

Answer 3

You can't hide it if you want the correct height and width, but you can move it such that it will be out of the screen, and thus effectively hidden. Try this:

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();