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

Why is this height matching function not working properly?

本文关键字：常工作 工作 能不能 功能 高度 为什么      更新时间：2023-09-26

我正在使用这个函数

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

这样我就可以在两个绝对位置的可切换图像下面有文本。在页面加载上，.listingImage1 img是480像素高，.listing .listingContent是483像素高，而不是应该的530像素。我认为这与.listingImage1 img的自动高度有关，但我不能诚实地计算出来，与3px无关。

当我调整窗口大小时，由于的功能几乎相同，.listing .listingContent变成了530px

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

所以我不明白。即使代码相同，它也不会在代码笔中复制。我把它上传到这里，刷新一两次显示行为。

使用相同的标记有更好的方法吗？我不能使用我在网上找到的很多方法，因为图像是由CMS生成的，所以它必须是两个img元素。不过我可以把它们放在任何地方。我在想也许我可以以某种方式使用附加，但后来淡出效果消失了。

<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

Chrome中的图像尚未完全加载。相反，将代码（仍在doc.ready中）更改为在图像的onload:中激发

$(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);
        })
});

EDIT：修复了load函数语法的错误

查看.outerHeight()。在您的情况下，.height()可能不会返回您要查找的内容。您可能需要填充和边距，甚至可能需要边界，这就是outerHeight()发挥作用的地方。

如果可以的话，根据所用图像的尺寸，给图像一个高度和宽度——这样，浏览器将能够计算图像的大小，从而计算周围块的大小。

最后，在极少数情况下，您可能会发现，如果在加载页面时对视图进行了某些修改，例如会影响页面的几何图形，那么确定高度的脚本可能运行得太早。如果是这种情况，您可以将调用封装在设置为1ms延迟的setTimeout()调用中。这将导致浏览器在完成初始渲染后，在下一轮中渲染元素。

setTimeout(function(){
    // place code here
    // make sure any variables used are in scope at this point
}, 1);

请注意，在这种情况下，不同的系统和浏览器可能会表现得非常不同，因为渲染将取决于系统和页面在其中渲染的浏览器的性能。

相关文章：