Jquery: to get image width on page ready

Hi,
How can I get the width of an image when the page is ready…?

I tried the code below, but it always return the value ‘0’…!

<script type="text/javascript" src="js/jquery/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var width = $("#image img").width();
	alert(width);
});
</script>
<div id="image">
<img src="xxx.jpg" />
</div>

many thanks,
Lau

as far as I know jQuery ready event fired when DOMContent loaded, before any images loaded, so there is practically no way to determine image size at that point
maybe you could try regular onload event, which is fired later

Anyway, what is your goal? maybe there is some other way to do it

hi, thanks, i want to get the value of the width of the image, so that i can use this value to set the width of a div on the page when the page is ready…

if u look at these two links, they are able to get the width and height of a targeted image when the page is ready, i still dont understand why i cant get it!??

http://webmuch.com/image-flip-using-jquery/
http://thejudens.com/eric/2009/07/jquery-image-resize/

yeah, sorry about that, it looks like it is possible, I was wrong about firing order of loading events.
Anyway, do you have any page where I can look at it, maybe there is some other problem besides the code you provided.
By the way, is image visible by default?

To restate what igv said:

jquerys ready() method fires when the dom finishes loading. The dom being loaded, does not mean that all the images have been loaded(that event would be window.onload). If you use ready() for this, you are rolling the dice as to whether or not that specific image will be loaded or not.

An image object also has an onload event for itself, which you could use for this. But, the problem is you need to register the event handler before the image finishes loading, which can be difficult unless you programaticaly create the image with the javascript Image() object. Trying to use onload of an <img> element created with html will be prone to race conditions.

crmalibu is correct, it working for me on local files now, because images are loaded instantly, but on the internet no such luxury. I think the solution for you is to use window.onload event or maybe there is a way to achieve what you want by css?

thats ok mate. i got the answer now which is i need to put the size of the image in img tag so that javascript can pick up the value on page ready.

this is the page im working on. if u turn off javascript on your browser then u will see what i want to achieve to degrade the page gracefully when there is no javascript enabled.

http://lauthiamkok.net/tmp/projects/part/

thanks,
Lau :smiley:

Why are you doing this through javascript? Seems your host runs PHP, so you could use gdlib to get the size of the image and write the CSS you need to make it look good in the PHP.

Take a look at

http://nl3.php.net/manual/en/function.getimagesize.php

Using this you don’t need any javascript at all :slight_smile:

yes this is another option - thanks! :smiley:

eventually i will need to use gdlib to pass the value of the image size into the image tag… thanks :stuck_out_tongue: