Как узнать высоту div с изображением внутри?

Question

[inscamp]

Создаём див, записываем в него <img src="..">Some text. Затем "закидываем" его в DOM.
JSFiddle
Только после того, когда див станет частью структуры DOM, мы можем узнать его конечную высоту с помощью jQuery-метода .height().
Однако вычисление высоты таким образом не всегда будет давать ожидаемый результат. Если в приведённом примере поменять ссылку на изображение, то значение высоты станет равным высоте дива без учёта высоты изображения (как будто она равна нулю или чуть больше).
Так как же определять высоту "готового" дива с изображением внутри?

Answer 1

[Дмитрий]

Потому что картинка еще не загружена, вот и высота 0. Ставьте вычисление высоты на событие onload для картинки.

Comments

[inscamp]

Спасибо за ответ.
Только всё никак не удаётся вытащить это значение из функции-обработчика. jsfiddle.net/905e13rr/2
Алерт в этой функции говорит правильное значение, но это значение не получается присвоить свойству внешнего объекта или переменной.

[Дмитрий]

inscamp: jsfiddle.net/905e13rr/6

Answer 2

[Владимир]

Дмитрий верно описал истоки проблемы. Если нет возможности дождаться загрузки страницы/картинки, то можно задавать размер картинки в таге на серверной части - тогда этой проблемы не будет.

Answer 3

[SagePtr]

Либо событие load ловить, либо отдельно хранить размеры картинки

Comments

[inscamp]

Спасибо за ответ.
Только всё никак не удаётся вытащить это значение из функции-обработчика. jsfiddle.net/905e13rr/2
Алерт в этой функции говорит правильное значение, но это же значение не получается присвоить свойству внешнего объекта или переменной.

[SagePtr]

inscamp: добавлять картинку в DOM после загрузки. Тогда можно получить высоту до того, как картинка получила стили.

[inscamp]

SagePtr: то есть добавление картинки в DOM объявить внутри функции-обработчика и обратиться к вычислению высоты оригинального изображения вот так jsfiddle.net/905e13rr/5 ?

[SagePtr]

inscamp: вычислять тоже внутри обработчика

Answer 4

[keslo]

Возможно как-то так нужно - jsfiddle.net/keslo/6d5axnb9/3

Comments

[Loot]

что это такое на фото?

[inscamp]

Cesavel: коралл