javascript - jQuery 在加载图像之前获取图像高度？

Question

我环顾四周并尝试了很多解决方案，但 jquery 仍然尝试在加载图像之前获取图像高度:

$('img').load(function(){
    var heightStart = $(".carousel .carousel-inner img").height();
    alert(heightStart); // 0
});

我总是得到0。有什么想法最好的方法是什么？

我什至尝试过使用普通的 js:

    var i = new Image()
    i.src = "images/xxx.jpg";
    var h = i.height
    alert(heightStart); // 464

获取图像高度但数字错误!数字总是较小，但图像的高度较长。

编辑:

图像没有高度和宽度属性:

<div id="myCarousel" class="carousel slide" data-ride="carousel">

    <div class="carousel-inner">

    <div class="item active">

        <img class="first-slide" src="images/xxx.jpg" alt="First slide" class="img-responsive">
        <div class="container">
            <div class="carousel-caption">xxx</p>
                </div>
            </div>
        </div>
    </div>

我的图像高度是464，因此new Image()是正确。但问题是图像已在大屏幕上通过 img-responsive 调整了大小。

Answer 1

$('img').load(function(){
    alert($(this).height());
});

或

var i = new Image()
i.src = "images/xxx.jpg";
i.onload = function() { alert(this.height) };

对答案进行一些解释 - 您的第一个函数将 onload 监听器注册到所有现有的 img 元素，这些元素会提醒第一个匹配的 img .carousel .carousel-inner 高度内的元素，可能是 0，谁知道呢。

您的普通示例的问题是您试图在图像加载完成之前提醒高度。