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，谁知道。

您的vanilla示例的问题在于您在图像加载完成之前尝试提醒高度。

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

1 个答案: