爲什麼高度返​​回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和窗口對象。