我正在尝试使用jQuery来查找容器的第一个“大孩子”的图像高度,然后将容器设置为该高度。但是,我似乎无法拉出图像高度属性 - 让src工作。有任何想法吗?它只是试图通过CSS拉高峰?我如何获得“真正的高度”我无法在img标签中输入宽度和高度 - 所以这不是一个选项;(
$(document).ready(function() {
var imageContainer = '#image-container';
var imageSrc = $(imageContainer).children(':first').children(':first').attr('src'); // control test
var imageHeight = $(imageContainer).children(':first').children(':first').height(); // have also tried attr('height')
alert(imageSrc + ' ' + imageHeight);
});
<div id="image-gallery">
<div id="image-container">
<div class="slide">
<img src="test1.jpg" alt="test1" />
<p>
<strong>This is a test 1</strong>
</p>
</div>
<div class="slide">
<img src="test2.jpg" alt="test2" />
<p>
<strong>This is a test 2</strong>
</p>
</div>
</div>
</div>
答案 0 :(得分:8)
来自API docs:
如果代码依赖于加载的资源(例如,如果需要图像的尺寸),则应将代码放在load事件的处理程序中。
因此,不要在$(document).ready();
中使用$(window).load();
或更好,$(image).load();
执行您的脚本。例如:
$(document).ready(function() {
var imageContainer = '#image-container';
$(imageContainer).children(':first').children(':first').load(function() {
var imageSrc = $(this).attr('src'); // control test
var imageHeight = $(this).height(); // have also tried attr('height')
alert(imageSrc + ' ' + imageHeight);
});
});
答案 1 :(得分:3)
你应该等到你的图像被加载 - 这是
的一部分 $('#imageContainer').children(':first').children(':first').load(function() {
alert($(this).height());
});
答案 2 :(得分:1)
您无法获得图像大小的原因是它们还没有任何尺寸。代码在页面加载后但在图像加载之前运行。
在加载页面中的所有元素后运行需要图像大小的部分代码:
$(window).load(function () {
...
});