Получение ширины изображения без назначенной ширины с помощью jquery

Question

У меня есть следующий код, который должен получить ширину изображения, которое динамически загружается при нажатии на миниатюру.

$("<img class='mypopupimage' src='" + imgSrc + "' style='padding:10px;' width='500' />").appendTo("div.mydiv");

var imgWidth = $(".mypopupimage").width();

Проблема, с которой я столкнулся, состоит в том, что все всплывающие изображения имеют разную ширину, но когда я удаляю атрибут ширины из изображения, переменная imgWidth устанавливается на 0.

Есть идеи?

Answer 1

На стек уже отвечали несколько раз, однако вот для простоты:

clientWidth и clientHeight - это свойства DOM, которые показывают текущий размер в браузере внутренних размеров элемента DOM (исключая поля и границы). Таким образом, в случае элемента IMG будут получены фактические размеры видимого изображения.

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

Этот ответ взят из здесь

Answer 2

Вы должны использовать атрибут naturalWidth, если вы хотите использовать jQuery или использовать «нормальный» JavaScript, как указано в udjamaflip:

$("<img class='mypopupimage' src='" + imgSrc + "' style='padding:10px;' width='500' />").appendTo("div.mydiv");
var imgWidth = $(".mypopupimage").attr('naturalWidth');