javascript - 为什么这个高度匹配功能不能正常工作？

Question

我正在使用这个功能

$(document).ready(function(){
    $('.listing .listingContent').height($('.listingImage1 img').height() + 50);
});

这样我就可以在两个绝对定位的可切换图像下方放置文本。在页面加载时，.listingImage1 img 的高度为 480px，而 .listing.listingContent 的高度为 483px，而不是应有的 530px。我认为这与 .listingImage1 img 的自动高度有关，但老实说我无法弄清楚，与 3px 无关。

当我调整窗口大小时 .listing .listingContent 变成 530px 就像它应该的那样，由于这个几乎相同的功能

$(window).resize(function(){
    $('.listing .listingContent').height($('.listingImage1 img').height() + 50);
});

所以我不明白。即使代码相同，它也不会在 codepen 中复制。我上传了here , 刷新一次或两次显示行为。

对于相同的标记，是否有更好的方法来做到这一点？我不能使用很多我在网上找到的方法，因为图像是由 CMS 生成的，所以它必须是两个 img 元素。不过我可以把它们放在任何地方。我在想也许我可以以某种方式使用 append，但是淡入淡出效果会丢失。

---

<article class="listing">
        <ul class="listingContent">
            <li class="listingImage1">
                <img src="http://i.imgur.com/H3OjxUy.png" />
            </li>
            <li class="listingImage2">
<img src="http://i.imgur.com/sjptNd9.png" />
            </li>
            <li class="listingTitle">
                foo
            </li>
            <li class="listingPrice">
                foo
            </li>
            </ul>
</article>

JavaScript

$(document).ready(function() {
    $(".listing").mouseenter(function() {
        $(this).find(".listingImage2,.listingImage1").fadeToggle();
    }).mouseleave(function() {
        $(this).find(".listingImage2,.listingImage1").fadeToggle();
    });
});

    $(document).ready(function(){
        $('.listing .listingContent').height($('.listingImage1 img').height() + 50);
    });
    $(window).resize(function(){
        $('.listing .listingContent').height($('.listingImage1 img').height() + 50);
    });

.listing {
    padding-bottom: 1em;
    img {
        max-width: 100%;
        height: auto;
    }
    .listingContent {
        position: relative;
        li {
            position: absolute;
        }
        .listingImages1, .listingImages2 {
            top: 0px;
            left: 0px;
            right: 0px;
        }
        .listingTitle {bottom: 25px;}
        .listingPrice {bottom: 0px;}
        .listingTitle, .listingPrice {
            top: auto;
        }
        .listingImage2 {
            display: none;
        }
    }
}

http://codepen.io/anon/pen/LVeGqO

Answer 1

图像尚未在 Chrome 中完全加载。相反，更改代码(仍在 doc.ready 中)以触发图像的加载:

$(document).ready(function(){
        //It will only run when the browser has the image's loaded height
        $('.listingImage1 img').load(function() {
            $('.listing .listingContent').height($('.listingImage1 img').height() + 50);
        })
});

编辑:修复了 load 函数语法的错误