Question

我想设置div #top height equals image height。我写道：

$(document).ready(function() {
    setTopHeight();
});

/*
* window resizing
*/
$(window).resize(function() {
    setTopHeight();
});

/*
* setting #top height by banner height
*/
var setTopHeight = function() {
    var bannerHeight = $('#banner-image').height();
    $('#top').height(bannerHeight + 'px');
};

它适用于调整大小，但不会重新加载。我试过这样的事：

$(document).ready(function() {
    setTimeout(function() {
        setTopHeight();
    }, 50);
});

它有效，但当然不是解决方案。有人可以告诉我为什么console.log返回0？

$(document).ready(function() {
    console.log($('#banner-image').height());
});

Answer 1

.ready无效，因为您的图片尚未加载。使用.load

Answer 2

当DOM准备就绪时，

$(document).ready会激活，但图像可能仍在下载 - 所以还没有高度。您可以在图片上使用jQuery load。

$('#banner-image').on('load', function () {
    setTopHeight();
})

Answer 3

jQuery .load()充当事件处理程序。 .load()是.on('load, function(){})的快捷方式。如果满载图像/元素，它将被触发。

示例1：

$('#banner-image').load(setTopHeight);

示例2

$('#banner-image').load(function(){
    setTopHeight();
});

示例3

$('#banner-image').on('load', setTopHeight);

Answer 4

尝试.load（）而不是.ready（）

$(window).load(function() {
      setTopHeight();
});

Answer 5

图像加载位于文档之后的第二个HTTP轮次中。所以你需要听图像加载

$('#banner-image').load(setTopHeight);

在文档加载时获取图像高度

5 个答案: