JQuery Actual Image

Question

I have an image of 1024x768

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

and below CSS sets the image width to

.frame img{
    width:425px;
}

And jQuery code

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

returns 425

How can I get the actual width of an image in 1024 in JavaScipt?

Answer 1

I am not sure, but I think that all functions related to the measurement (for example .width()) will return the actual width, not the actual width of the image.

What you can do is add a new image in javascript, set the source to the original source image and get the width from this.

Unverified example:

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

Answer 2

, javascript , . onload .

, , node...

- :

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

:

<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">
</span> 

, , ...

Answer 3

maybe something like this will be useful

For functions in which you do not want to change the original layout or image.

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