Geek Answers Handbook

Get image width and height

I need to get image sizes in javascript (jQuery) if no styles have been set for it (jQuery css () returns 0).

Perhaps this is due to the fact that I upload the image using jQuery just before requesting its size. If so, is there any listening event that tells me when the image is uploaded?

+4
source share
5 answers

The image may not be fully loaded, so the sizes cannot be set. But without your code, I cannot say what you are doing wrong, but here is an Example that will work:

function LoadImage(isrc) { var oImg = new Image(); oImg.src = isrc; if (oImg.complete) { window.alert(oImg.src + ' ' + oImg.width + ' x ' + oImg.height); } else { window.setTimeout('iLoad(imgsrc)', 1000); } } <body onLoad='LoadImage(imgsrc)'>
+3
source

here is the link that helps, look at the demo: http://docs.jquery.com/Events/load

with jquery, the load () event appears, which is fired when the image is loaded, that is:

 <script type="text/javascript"> $(document).ready(function() { $('#theImage').load(function() { // do the stuff here. }); }); </script> <img src="blah.jpg" id="theImage" />
+1
source

Depending on what you after image.width or image.naturalWidth (and the height equivalents) width / height gives the width / height attributes on the image tag, naturalWidth / Height gives the dimensions of the actual main image.

0
source

You can use img onload to get the dimensions after loading the image:

 <img src="..." onload="getDimensions(this)" />
0
source

You can try combining karim79 and John Boker . Try pre-loading the image into a hidden DOM, and when it loads, you can try to get its width and height.

0
source

More articles:


All Articles