Javascript 在加载内容之前触发onload事件

我试图使我的img包装高度为其宽度的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

---

将fixSize函数包装到jQuery document ready函数中

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

---

我认为

resize

函数，因此您的

fixSize

函数可能会在页面加载时立即被调用，然后再加载内容。试试这个

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

---

正如@mister positive建议的那样，将代码包装在文档就绪函数中可能也是一个好主意。

如果您将图像设置为固定大小div的背景，并根据需要使用

背景大小：contain

或

背景大小：cover

，可能会更容易。这样做意味着图像的w/h比无关紧要，也不需要JS代码，因为使用jQuery时，将fixSize函数调用包装到jQuery document.Ready函数中

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

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