0

我想设置 div#top 高度等于图像高度。我写:

$(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());
});
4

5 回答 5

1

jQuery .load()充当事件处理程序。.load().on('load, function(){}). 如果完全加载图像/元素,它将被触发。

示例 1:

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

示例 2

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

示例 3

$('#banner-image').on('load', setTopHeight);
于 2013-03-20T10:58:40.757 回答
1

.ready将无法工作,因为您的图像尚未加载。利用.load

于 2013-03-20T10:57:07.110 回答
1

$(document).ready当 DOM 准备好时触发,但图像可能仍在下载 - 所以还没有高度。您可以在图像上使用jQuery 加载。

$('#banner-image').on('load', function () {
    setTopHeight();
})
于 2013-03-20T10:57:09.620 回答
0

尝试 .load() 代替 .ready()

$(window).load(function() {
      setTopHeight();
});
于 2013-03-20T10:59:13.017 回答
0

图像加载在您的文档之后的第二轮 HTTP 中进行。所以你需要听图像加载

$('#banner-image').load(setTopHeight);
于 2013-03-20T11:01:37.910 回答