Jquery 查找图像高度不起作用

Question

我正在尝试使用 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>

Answer 1

来自 API 文档：

如果代码依赖于加载的资源（例如，如果需要图像的尺寸），则应将代码放置在加载事件的处理程序中。

因此，不要在 $(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);
    });
});

Answer 2

你应该等到你的图像被加载 - 类似的事情

 $('#imageContainer').children(':first').children(':first').load(function() {
     alert($(this).height());
 });

Answer 3

您无法获取图像尺寸的原因是它们还没有任何尺寸。该代码在页面加载之后但图像加载之前运行。

加载页面中的所有元素后，运行需要图像大小的代码部分：

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