Question

Works in all browsers except <= IE7..

Check this example, http://jsfiddle.net/uVRbG/1 in iE7.

When I remove the style display:none from the object however, it works correctly:

http://jsfiddle.net/uVRbG/2/

I don’t get it, I simply want the hardcoded value…it shouldn’t matter whether or not the object is visible at the time.. Is there any other method to get the width and height?

Note: I need the width and height at document.ready, I can’t wait for all these images to load and then use img.width();

HTML:

<div id="test" style="display:none">
<img src="http://neuro.amygdala.net/wp-content/uploads/2007/11/i-stress-test.gif" width="100" height="100" />
</div>

<div id="result"></div>
<div id="result2"></div>

Javascript:

$('#result').html($('#test img:first').attr('width'));
$('#result2').html($('#test img:first')[0].getAttribute('width'));

Thanks,
Wesley

Answer 1

.width()

might help you, but as to why IE7 has a problem with this, I think it might be to do with your selector.

I’ve always had trouble with :first and :last pseudo-selectors in IE, it might just not be selecting the image.
.attr() doesn’t have any bugs with display:none afaik.

Hope this helps

EDIT:
Try adding this to your fiddle:

var imgWidth = $($('#test').html()).attr('width');
alert(imgWidth);

Bit of a hacky workaround but might work. I’ve tried and can’t test with IE7, it throws a script error when I load jsfiddle >:(

EDIT:
Last resort, a regex:

var imgWidth = $('#test').html().search(/width=[\"\'][0-9]+/);
alert(imgWidth);