javascript - 设置div的高度等于图像的高度

Question

所以我已经为此苦苦思索了很长时间，但似乎无法让它发挥作用。我读过类似的问题并尝试了他们的答案，但它们对我不起作用，所以我在这里。

我有一个 slider ，它包含一些标签，我想将容器 div 的高度设置为等于图像的高度。首先是 html:

<section class="row" id="carousel">
    <ul class="rslideshow"> <!-- Images appear here -->
      <li><img src="../img/image1.jpg" alt=""></li>
      <li><img src="../img/image2.jpg" alt=""></li>
      <li><img src="../img/image3.jpg" alt=""></li>
      <li><img src="../img/image4.jpg" alt=""></li>
      <li><img src="../img/image5.jpg" alt=""></li>
    </ul>
</section>

这是我尝试的第一个代码:

function setHeight(ab){
        var heightImage = $('.rslideshow > li:first-child > img').height();
        ab.height(heightImage);
        console.log(heightImage);
    }
    setHeight($('.rslideshow'));
    $(window).resize(function() {
        setHeight($('.rslideshow'));
    });

问题是图像的高度被计算为 0。原因是 DOM 树准备好后 document.ready 就会触发。此时，图像尚未加载。所以我尝试使用 setTimeout 延迟，但它不起作用并且无论如何也不可靠。接下来，我尝试使用jquery的onLoad，如下所示:

function setHeight(ab){
    var target = $('.rslideshow > li:first-child > img'),
        heightImage = 200;

    target.on('load', function(){
        heightImage = $(this).height();
        console.log(heightImage);
        ab.height(heightImage);
    });

}
setTimeout(setHeight($('.rslideshow')), 500);
$(window).resize(function() {
    setHeight($('.rslideshow'));
});

这似乎有效，但由于某种原因，onLoad 不会在 window.resize 上触发。我还在 Jquery 的网站上看到 onLoad 不可靠并且跨浏览器。

所以这就是我被困住的地方。有任何想法吗？我也对非 JavaScript 解决方案持开放态度。

Answer 1

使用 img 元素的 complete 或 readyState JavaScript 属性，如以下代码片段所示。

$(function () {
    function setHeight(ab) {
        var target = $('.rslideshow > li:first-child > img'),
            heightImage;
        if (target[0].complete || target[0].readyState === 4) {
            heightImage = target.height();
            ab.height(heightImage);
        }
        else {
            target.on('load', function () {
                heightImage = $(this).height();
                console.log(heightImage);
                ab.height(heightImage);
            });
        }
    }
    setHeight($('.rslideshow'));
    $(window).resize(function () {
        setHeight($('.rslideshow'));
    });
});

说明:

complete - 返回浏览器是否完成加载图像。

readyState - 使用 Image Element constructor 时或触发onreadystatechange AJAX事件，我们可以使用readyState属性。请检查下面的readyState详细信息。

State  Details

0      Request is not initialized
1      Connected with server
2      Request has been sent
3      Request is in process
4      Request is completed

希望这有帮助!