为什么高度返​​回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; 

    }); 
}); 

新的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和窗口对象。