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

Question

我想设置 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());
});

Answer 1

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

示例 1：

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

示例 2

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

示例 3

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

Answer 2

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

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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