1

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

  • Please include your code in the question, and then include jsFiddle links as supplements if you wish. – user113716 Sep 30 '11 at 13:24
  • You can't upgrade to the latest jQuery? – Šime Vidas Sep 30 '11 at 13:28
  • @ŠimeVidas No I can't, I just noticed that it works in 1.6.3 - (only the first .attr('width'), the second .getAttribute('width') still doesn't work - do you know what internals were changed to fix this? Heh.. I guess not.. :( –  Sep 30 '11 at 13:31
  • @Wesley `getAttribute('width')` is not a jQuery method, it's built-in in the browsers, so you can't expect it to start working when you upgrade jQuery `:P`. Why can't you upgrade? – Šime Vidas Sep 30 '11 at 13:35
  • possible duplicate of http://stackoverflow.com/q/1472303/901048 – Blazemonger Sep 30 '11 at 13:36
  • 1
    @mblase75 Don't think this is a duplicate, that question is about .width() - this is about .attr('width') (and it wasn't properly answered) –  Sep 30 '11 at 13:37
  • @mblase75 agree with Wesley, this question is about a different method and different use case. – totallyNotLizards Sep 30 '11 at 13:44

5 Answers5

1

You could just use jquery.hide() instead of display none, and store the width in a variable before it's hidden?

AndyD
  • 875
  • 7
  • 18
  • I guess this would work? Hide it, get the width, and than show it? – r0skar Sep 30 '11 at 13:30
  • jQuery actually saves the object for you when you hide it. From documentation: _The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css('display', 'none'), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value._ – Terry Sep 30 '11 at 13:33
  • I guess I could also just do: check if attr is diff than zero.. If not, show the div, get the attr again, and hide the div again? It'd be so fast that it would not be seen? Or not? –  Sep 30 '11 at 13:36
0

Try to use 

.width()

instead

http://jsfiddle.net/uVRbG/3/

genesis
  • 50,477
  • 20
  • 96
  • 125
  • Read my note, I said I can't use img.width() because that requires all images are loaded and I can't wait that long. (Correct?) –  Sep 30 '11 at 13:20
0
.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);
totallyNotLizards
  • 8,489
  • 9
  • 51
  • 85
  • I just changed the fiddle, removing the :first but the problem remains. .width() requires the image is loaded, I need the width at document.ready - It's right there in the source code, why can't they just return that.. –  Sep 30 '11 at 13:22
  • Thanks, interesting idea but it doesn't work; an image does not have HTML inside out it. I would need outerHTML. But perhaps I'll try cloning the object? Though that all adds to memory usage.. Will update to tell you if that works.. –  Sep 30 '11 at 13:48
  • Well, the clone also returns zero.. unfortunately. –  Sep 30 '11 at 13:51
  • 2
    You did gave me an idea though: var result = thumbnail.parent().html().match(/width=["']?([0-9]+)/)); -- regexes.. What everyone around here seems to hate.. But it works.. –  Sep 30 '11 at 13:58
  • that was going to be my second suggestion :) – totallyNotLizards Sep 30 '11 at 14:07
0

Try this workaround: use visibility:hidden;position:absolute instead of display:none. Then the image is loaded and positioned out of the way, so the width can be computed.

When you want to show the image later, change it back to position:relative at the same time.

http://jsfiddle.net/uVRbG/7/

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
  • That's an OK workaround I'll keep it in mind if I find no other solutions for this (but preferrably I'd like something a little less dirty ;)) –  Sep 30 '11 at 13:32
0

You have to wait for the image to be loaded before you can get the width!

Marcus Jonsson
  • 51
  • 3
  • No, I want the property that I set in the HTML code, which is there for everyone to read - .attr('width') works immediately in all browsers except <= IE7. –  Sep 30 '11 at 13:33
  • This is what i use to get the width as fast as posible: $('img'). one("load",function(){ width= $(this).width(); // do what you want with the width }).each(function(){ if(this.complete) $(this).trigger("load"); }); – Marcus Jonsson Sep 30 '11 at 13:58
  • Well, that's still only as fast as the loading of the image. I want the attribute/property that is already in the HTML. Theoretically none of the images should even load to get this value. –  Sep 30 '11 at 14:00