jQuery Actual image diamension

Question

I have a 1024x768 image

<span class="frame">
<img alt="Image" title="Image" src="hD41120CA-7164-11DF-A79E-F4CE462E9D80_Green_Sea_Turtle.jpg">
</span> 

and the below CSS sets the image width to

.frame img{
    width:425px;
}

And the jQuery code

$('.uploaded_image img').attr("width");

returns 425

How can i retrieve the actual width of the image 1024 in JavaScipt?

Answer 1

I´m not sure, but I think all dimension related functions (like .width()) will return the actual width and not the real width of the image.

What you could do, is add a new image in javascript, set the source to the source of your original image and get the width from that.

An untested example:

tmp_image = new Image();
tmp_image.src = $('.uploaded_image img').attr("src");
image_width = tmp_image.width;

Answer 2

You must know that the width of an image is not available to the browsers javascript core until the image is completely loaded. I suggest to get the width of that image in a onload event of the image object.

Another issue is that you are getting the attribute width which you arent passing through the node...

To set the image onload event will be something like:

$('#imageid').load(function() { 
      $(this).css({ width: "", height: "" }).removeAttr("height").removeAttr("width");
      var REAL_WIDTH = this.width;
})

your image's code:

<span class="frame">
<img alt="Image" id="imageid" title="Image" src="http://localhost/zapav/site/assets/questions/D41120CA-7164-11DF-A79E-F4CE462E9D80_Green_Sea_Turtle.jpg"&gt;
</span> 

Also, i must say, the load event will no be triggered in cached images...

Answer 3

maybe something like this will be usefull

For functions where you do not want to alter the original placement or image.

$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);