Get height of image inside a hidden div

Question

Hi,

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

Make the div temporarily visible in order to compute the height or hide the div off screen instead of using display: None. I have used the first approach, and found it to be fast enough that you will never see the element.

Answer 2

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

Answer 3

it looks like you need to compute the height & width of an image. if so, you're thinking of it too hard.

Answer 4

you have to use find()

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

or

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

becouse you have appended it after the DOM was loaded

Answer 5

I'm not sure you can do it with jQuery (or javascript at all). I had a similar problem with misreported heights and widths on loading/hidden img's. You can, however, wait till the image loads, get it's correct height and width and then hide the parent... like so:

var height, width;

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

Answer 6

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/