为什么高度返​​回0

Question

我在主页上有一个旋转幻灯片，并希望根据图像的高度减去标题的高度减去箭头的高度来设置内容的高度。由于某种原因，标题或图像的高度都不会被返回为0。

见这里：http://www.keganquimby.com/lumina/

摘录（图像旁边标题下的内容）在图像不够高时切入箭头，所以我想根据图像高度用CSS设置它。

我的js：

jQuery(document).ready(function($){
$('.slides .slide').each(function(){

    var slideHeight = $(this).height();
    var headerHeight = $('.slide-content header').height();
    var arrowHeight = $('.flex-direction-nav').height();

    var contentHeight = slideHeight - headerHeight - arrowHeight;

    });
});

NEW JS（编辑设置高度，并在每个循环之外拉出其他高度调用）：

jQuery(window).load(function($){

var slideHeight = $(this).height();
var headerHeight = $('.slide-content header').height();
var arrowHeight = $('.flex-direction-nav').height();

$('.slides .slide').each(function(){

    var contentHeight = slideHeight - headerHeight - arrowHeight;
    $('footer.post-more').css('height', contentHeight + 'px');

    });
});

Answer 1

在测量高度之前，您必须等待图像加载。请注意，DOM就绪并不意味着已加载图像。试试这个：

jQuery(window).load(function($){
    var headerHeight = $('.slide-content header').height(),
        arrowHeight = $('.flex-direction-nav').height();

    var imgHeights = $('.slides .slide').map(function() {
        return $(this).height() - headerHeight - arrowHeight;
    });
});

来自jQuery.load：

  

当加载事件和所有子元素已完全加载时，会将事件发送到元素。此事件可以发送到与URL关联的任何元素：图像，脚本，框架，iframe和窗口对象。