Когда картинка появилась на странице, то к ней сразу же начинают применяться стили и узнать её истинные габариты через свойства width
и height
уже нельзя.
Во всех современных браузерах (включая IE9 и старше) есть свойства naturalWidth
и naturalHeight
, которые после полной загрузки картинки принимают значения ширины и высоты изображения, соответственно.
var img = document.getElementById("gallery-image"),
width = img.naturalWidth,
height = img.naturalHeight;
В IE8 и младше этих свойств нет. Получить не модифицированные размеры можно, если создать новый элемент с тем же самым значением атрибута src
и уже у него прочитать свойства width
и height
.
function getDimensions(sourceImage) {
var img = new Image();
img.src = sourceImage.src;
return {
width: img.width,
height: img.height
};
}
Коментарии к заметке
Недавно делал что-то подобное, потому что не знал про naturalWidth/Height. Хотя поддержка ИЕ8 была неважна и можно было обойтись ими. Только я ещё onload добавлял для пущей надёжности :-)
А «второй» раз картинка же берётся из кэша браузера и её габариты известны сразу. Если по какой-то причине будут «промахи» по кэшу, то можно и на
onload
вешаться.