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

我想设置div＃顶部高度等于图像高度。我写道：在文档加载时获取图像高度

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

来源

2013-03-20 Dhofca

是banner-image img标签的id或它的图像包装div ID？ – 2013-03-20 10:57:36

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

来源

2013-03-20 10:57:07 btevfik

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

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

来源

2013-03-20 10:57:09

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

实施例1：

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

实施例2

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

实施例3

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

来源

2013-03-20 10:58:40 iDev247

谢谢你和埃米尔伊万诺夫 – Dhofca 2013-03-20 11:02:11

尝试.load（）来代替。就绪（）

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

来源

2013-03-20 10:59:13 grigno

图像加载在文档之后的第二个HTTP循环中。所以你需要听图像加载

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

来源

2013-03-20 11:01:37 Shuping

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

回答

相关问题