jQuery Получить высоту отзывчивого изображения

Question

У меня есть набор изображений, которые реагируют на страницу (т. Е. Максимальная ширина установлена ​​на 100%).

<div class="exh"> 
    <img src="#" /> 
</div> 
<div class="exh"> 
    <img src="#" /> 
</div> 
<div class="exh"> 
    <img src="#" /> 
</div> 

с

.exh img { 
    max-width:100%; 
} 

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

$(".exh img").each(function() { 
    var $this = $(this); 
    console.log($this.height()); 
}); 

Answer 1

за этот ответ я дал на аналогичный вопрос:

Why does jQuery.css('width') return different values in different browsers?

.width() или height() является «вынесено в DOM» размер элемента - и для того, чтобы вернуть значение больше 0, элемент должен быть полностью доступен для DOM (иначе изображение должно быть полностью загружено)

Что вы хотите:

var myImage= new Image(); 
myImage.onload=function() { alert(this.height);} 
myImage.src= "your/image/url"; 

Короче говоря - вы должны гарантировать, что изображение загружается перед вызовом height()

Answer 2

Если вам нужно сделать, это каждый раз, когда страница загружена, и когда страница изменяется это сделать:

$(document).ready(function() { //Fires when DOM is loaded 
    getImageSizes(); 
    $(window).resize(function() { //Fires when window is resized 
     getImageSizes(); 
    }); 
}); 
function getImageSizes() { 
    $(".exh img").each(function() { 
     var $this = $(this); 
     console.log($this.height()); 
    }); 
} 

Дополнительная информация о .resize(): http://api.jquery.com/resize/

Дополнительная информация о .ready(): http://api.jquery.com/ready/