Определение ширины изображения с помощью JavaScript при использовании maxWidth

Question

Рассмотрим этот код:

var img = new Image();

img.onload = function() {
    console.log(this.width);
};

img.src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/800px-Gull_portrait_ca_usa.jpg';

document.body.appendChild(img);

Это распечатает ширину изображения (800) правильно. Но если я применяю максимальную ширину с помощью CSS:

img {max-width: 400px}

Контрольный пример: http://jsfiddle.net/MSjnM/

Приведенный выше код JS выведет 400. Это немного сбивает с толку, так как можно подумать, что атрибут width представляет ширину исходного изображения, а не вычисленную ширину.

Теперь к чему-то еще более запутанному, если я добавлю изображение в событие onload после определения ширины, я получу другой результат:

var img = new Image();

img.onload = function() {
    console.log(this.width);
    document.body.appendChild(img);
};

img.src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/800px-Gull_portrait_ca_usa.jpg';

Контрольный пример: http://jsfiddle.net/MSjnM/2/

Вместо этого будет напечатано 800, даже если CSS применяется. Я предполагаю, что это потому, что изображение добавляется после Я обнаружил ширину и что максимальная ширина будет применена, как только изображение будет вставлено в DOM.

ОК, поэтому, если я хочу получить исходный размер изображения, независимо от того, когда или если элемент IMG вставлен в DOM или какие-либо стили CSS были применены, как бы я сделал этот отказоустойчивый? *

Answer 1

Для меня: в IE9, Opera, Safari (ПК), FF и Chrome свойства naturalWidth / naturalHeight возвращают нужные значения

http://jsfiddle.net/MSjnM/5/

Answer 2

Загрузите изображение независимо в новый объект Image и получите там ширину:

var img = new Image();
img.src = 'http://placehold.it/350x150'
console.log(img.width);