javascript - onload 事件在内容加载前触发

Question

我正在尝试将我的 img-wrapper 高度设为其宽度的 80%。当我调整窗口大小时，下面的代码会触发并正常工作，问题是该函数无法获得正确的宽度值。相反，宽度取为 100，因此高度计算为 80px。

该网站正在使用 Bootstrap ，我正在尝试制作看起来有点像宝丽来照片的卡片。图像包装器需要具有标准的宽高比，并且图像本身需要包含在包装器中，但我不确定图像是否具有正确的宽高比。

几乎可以工作的 JS:

fixSize = function() {
    $('.card-img-wrapper').each(function() {
        width = $(this).width();
        height = width * 0.8;
        $(this).height(height);

        // Hiding the loader wheel
        $(".loader").hide();

        // Showing hidden elements to avoid flickering and resizing
        $(this).parent().removeClass("hide");
    });
}

$(window).on('load', fixSize);
$(window).resize(fixSize);

HTML

<!-- This is within PHP foreach loop -->
<div class="col-md-4">
    <a class="float-left wh100" href="p_info.php?pID=<?php echo($p['ID']); ?>">
        <div class="card hide">
            <div class="card-img-wrapper">
                <img src="<?php echo($p['imagepath']); ?>">
            </div>
            <h3><?php echo($p['name']); ?></h3>
            <p>Price: <?php echo($p['price']); ?> €</p>
        </div>
    </a>
</div>

CSS

/* Helper Classes */

.float-left {
    float: left;
}

.wh100 {
    width: 100%;
    height: auto;
}

.hide {
    visibility: hidden;
}


/* Card */

.card {
    width: 100%;
    margin-bottom: 30px;
    padding: 30px;
    overflow: hidden;
}

.card-img-wrapper {
    width: 100%;
    height: 25vh;
}

.card-img-wrapper img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

Answer 1

将您的 fixSize 函数包装在 jQuery 文档就绪函数中。

$( document ).ready(function() {
     $(window).resize(fixSize);
});