Get the width and height of an image in Internet Explorer

I have an imag开发者_Python百科e that is wrapped inside a couple of DIV elements

<div id="wrapper">
...
<img src="myphoto.png" height="400px" width="500px>
</div>

I use jQuery, to access the height or width I either use

jQuery(img).attr('height');

or

jQuery(img)[0].height;

Unluckily, when the wrapping DIV 'display' property change, these values are set to 0 for example, if I do

$('#wrapper').hide()
then
jQuery(img)[0].height = 0;

The same for the attributes.

Any idea how to fix this, showing the DIV, getting the values and hidding it again does solve the problem, however I can't guess the number of wrapping DIVs as it can (and their behaviors change).

Thanks

Edit: Thanks for all answers. However, I forget to mention that I don't control DIV hiding and style. My script plays with Images and is made to integrate in any page, so the user is the one who do hide/Show/change the values.

Use .css() to get the stored value instead, like this:

jQuery('img').css('height');

I know it sounds a bit strange, but before you dismiss it, try it :)

I usually do this, when you cache the width and height before the hiding you can still use them. Something like this:

var dimensions = {width: $(img).width(), height: $(img).height()};
$(img).hide();

Or when you can't do this because the hiding and the need for the value are spread out you could save the height and width in the data object

$(img).data('dimensions', {width: $(img).width(), height: $(img).height()});

Then you can acces them like this:

 $(img).data('dimensions').width;

You could even make sure that all images on the page have these data properties using the following code:

$(document).ready(function(){
    $('img').each(function(){ //embedded images
        $this = $(this);
        $this.data('dimensions', {width: $this.width(), height: $this.height()});
    });
    $('img').live('load', function(){ //inserted images
        $this = $(this);
        $this.data('dimensions', {width: $this.width(), height: $this.height()});
    });
});

The same as my answer here:

Convert css width string to regular number

Instead of hiding it with .hide() (display: none) you could hide it with .css('visible', 'hidden') then .width()/.height() will work.

If you don't want to change your .hide()´s then you could apply visible: hidden and thereafter .show() and then measure the height. After you have measured it, reverse that. Objects still affects the page layout when they are hidden by visible: hidden - beware of that.

To avoid tags which mess with the layout, you could set the position to absolute, move it to the body tag and then measure.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="file" id="file" />
<script type="text/javascript" charset="utf-8">
$("#file").change(function(e) {
    var file, img;
    file = document.getElementById("file");
    if (file!=null) {
        img = new Image();
        img.src = file.value;
        img.onload = function() {
            alert(img.width + " " + img.height);
        };
        img.onerror = function() {
            alert( "not a valid file: " + file.type);
        };
    }

});
</script>