Question

我正在使用此功能

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

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

使用相同的标记有更好的方法吗？我不能使用我在网上找到的很多方法，因为图像是由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

Answer 1

图片尚未在Chrome中完全加载。相反，更改代码（仍然在doc.ready中）以触发图像的onload：

config
|__deploy
   |__production.rb
   |__staging.rb

Capfile

编辑：使用set :user, 'deploy' server 'example.com', user: fetch(:user)函数语法修复错误

Answer 2

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

如果可以的话，根据所用图像的尺寸给图像一个高度和宽度 - 这样，浏览器将 - 已经在页面加载 - 能够计算图像的大小，从而计算出图像的大小周围的街区。

最后，在极少数情况下，您可能会发现，如果在加载页面时对视图进行了某些修改，例如哪些会影响页面的几何形状，那么可能是您的脚本确定了高度，运行得太早。如果是这种情况，您可以将呼叫包裹在setTimeout()呼叫集中，延迟时间为1毫秒。这将导致浏览器在完成初始渲染后在下一个“圆形”中渲染元素。

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

请注意，在这种情况下，不同的系统和浏览器的行为可能会有很大不同，因为渲染将取决于系统上的性能以及页面在其上呈现的浏览器。

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

2 个答案: