Chrome получает проблему высоты изображения при загрузке табуляции, хотя использует функцию .load

Question

некоторые изображения (например, 4 изображения с разной высотой) внутри TabContent, я написал

$('#Tab').tabs({.......}); 
// Tab function is not the point, its fine.

$('#TabContent').ajaxComplete(function() {
    $('.bookCover').removeAttr('height');
    $('.bookCover').each(function() {
        var h;
        h = this.height;
        $(this).height(h);
        alert($(this).height());
    });
});

, и результат равен 130, 0, 0, 0. (только первое может получитьреальная высота)

как получить высоту в Chrome.Когда я использую Tabsload.

Я пытался использовать

$('.bookCover').load(function() {
    // ........
    $(this).height(h);
    alert($(this).height());
});

, но все еще могу получить, как только данные TabContent загружены.

снова щелкните вкладку, тогда TabContent неправильно с высотой.

Answer 1

Проблема связана с тем, что элементы, которые скрыты display: none, не имеют атрибута высоты.

Я создал демонстрационную скрипку здесь

Лучшая альтернатива, которую я могу придумать, - это клонировать изображение в положение вне экрана (скажем, left: -3000px) и установить на нем значение display: block, а затем получить его высоту.