How to tell if an image has been given a specific width/height with Javascript (jQuery)?

Question

Possible Duplicate:
How to get image size (height & width) using javascript?

Normally we can get image width with $('img').width() or $('img').css('width') when width is specified like the following

<img src="image.gif" width="32" height="32" />
<img src="image.gif" style="width: 32px; height: 32px" />

But if we don't specify a width:

<img src="image.gif" />

IE will return 28px, and FF will return 0px.

The problem is that we might set an image width to 28px or 0px intentionally, which would result a same number with the condition where no width is actually set.

My question is: how can we tell whether an image has been given a specific width/height or not?

edit

sorry folks, forgot one important thing: 28px on IE and 0px on FF only happens when image cannot be found (404)

Even more problematic is a width via a class I guess: `` with `.wide { width: 32px; }` — Wolfgang Stengel, Oct 15 '12 at 21:03
Does IE return 28px with `.width()` or with `.css('width')`? — Wolfgang Stengel, Oct 15 '12 at 21:06
This is a duplicate question. See http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript OR http://stackoverflow.com/questions/5633264/javascript-get-image-dimensions — qodeninja, Oct 15 '12 at 21:07
@qodeninja nah...completely different. I'm looking for a method to check **if dimensions are given**, not dimension values. — user1643156, Oct 15 '12 at 21:11
@user1643156 - it's the same thing. If theres no value, then the dimension isnt set. — qodeninja, Oct 15 '12 at 21:12
@qodeninja that does not apply to 404 not found. both IE and FF will return a number just like a value has been set. — user1643156, Oct 15 '12 at 21:17
@user1643156 yes well your question didnt state that issue before -- thanks for updating it. — qodeninja, Oct 15 '12 at 21:18

score 2 · Answer 1 · answered Oct 15 '12 at 21:02

2

Check .attr('width') / .attr('height').

answered Oct 15 '12 at 21:02

Explosion Pills

188,624
52
326
405

what if the width is explicitly set using CSS? – ahren Oct 15 '12 at 21:04
I believe that only checks if a width/height **attribute** has been specified. – user1643156 Oct 15 '12 at 21:04
@ahren then you can check `.css('width')` or even look at `.attr('style')`. – Explosion Pills Oct 15 '12 at 21:04
If you don't care if it was set with an height/width attr or a css declaration, you could use `.height()` or `.width()` – A F Oct 15 '12 at 21:27
If you need to figure out the actual width and height of the image, then .width() and .height() is a much better choice as it looks for the actual image size first and then checks for the attributes if the actual image width is not available. There should never be a reason to use .attr('width')/.attr('height') over .width() and .height(). – Rick Strahl Oct 15 '12 at 21:40

Wolfgang Stengel · Answer 2 · 2012-10-15T21:47:13.360

1

It's a hack, but you can get the original HTML this way:

var htmltag=$("img")[0].outerHTML;

And then parse this for width="..." or style="...":

if (
    htmltag.match(/style=['"][^'"]*width:/) ||
    htmltag.match(/width=['"]/)
   ) alert("Has width");

There are edge cases with border-width and so on, but you get the idea.

edited Oct 15 '12 at 21:47

answered Oct 15 '12 at 21:15

Wolfgang Stengel

2,867
1
17
22

thanks Wolfgang, but styles that are set in external css files cannot be detected with your method. (yes, I didn't mention external css) – user1643156 Oct 15 '12 at 22:07

score 0 · Answer 3 · answered Oct 15 '12 at 21:13

Images load asynchronously in the browser, so it depends on where you check for the dimensions. I think what you're seeing is that the image has not yet loaded when you query the width or height.

If you run this you may see that the initial alert() reports 0 but if you then click on the button it shows the actual size:

<img id="Image" src="images/MessageBoardLogo.png" />
<input type="button" id="Button" value="Caption" />

<script type="text/javascript">
$().ready( function() {
    imageSize();

    $("#Button").click(imageSize);
});
function imageSize()
{
    alert($("#Image").width());
}        
</script>

Ironically for me FireFox immediately reports the width in the first example, IE and Chrome show 0px, but that just goes to show it depends on the timing of the browser, the load time for the image etc.

The best way to ensure that the image has loaded and is ready to read the size reliably is a with a load handler:

$("#Image").load( function() { 
                      // do whatever you need with width and height
                      global.imgWidth = $(this).width(); 
                      global.imgHeight = $(this).height() 
                   });

How to tell if an image has been given a specific width/height with Javascript (jQuery)?

edit

3 Answers3