jQuery фактический размер изображения

Question

У меня есть изображение 1024x768

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

, и нижеприведенный CSS устанавливает ширину изображения на

.frame img{
    width:425px;
}

А код jQuery

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

возвращает 425

Как узнать фактическую ширину изображения 1024 в JavaScipt?

Answer 1

Я не уверен, но я думаю, что все функции, связанные с размерами (например, .width()), будут возвращать фактическую ширину, а не реальную ширину изображения.

Что вы можете сделать, это добавить новое изображение в javascript, установить источник в качестве источника вашего исходного изображения и получить ширину от этого.

Непроверенный пример:

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

Answer 2

может быть что-то подобное будет полезно

Для функций, в которых вы не хотите изменять исходное расположение или изображение.

Answer 3

Вы должны знать, что ширина изображения недоступна ядру javascript браузера, пока изображение не будет полностью загружено. Я предлагаю получить ширину этого изображения в событии onload объекта image.

Другая проблема заключается в том, что вы получаете ширину атрибута, которую вы не проходите через узел ...

Чтобы установить событие загрузки изображения, будет что-то вроде:

$('#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> 

Кроме того, я должен сказать, что событие загрузки не будет вызываться в кэшированных изображениях ...