页面刷新时JS计算元素宽高不一致问题求助

未改变窗口尺寸，仅刷新页面时，元素宽高会出现不一致的情况——10次刷新里只有1次符合预期（对应图YqBSB.png），其余均为异常效果（对应图e5BnD.jpg）。打印日志显示：奇数行是.vclBox的offsetHeight值（固定为921），偶数行是对应图片的height值（如554、582等，数值不稳定）。

相关代码片段 #

JavaScript代码 #

const wi = box[0].offsetWidth;
const he = box[0].offsetHeight;

for (let h = 0; h < vclimgs.length; h++) {
    let itemm = vclimgs[h];
    itemm.style.width = "calc(" + wi + "px - 30%)";
    itemm.style.height = "calc(" + he + "px - 40%)";
    console.log(he)
    console.log(itemm.height)
}

CSS代码 #

.vehicleSelector {
    position: absolute;
    display: grid;
    padding-top: 2%;
    padding-left: 5%;
    padding-right: 5%;
    grid-template-columns: repeat(3,1fr);
    gap: 10%;
    overflow: auto;
}

.vclBox {
    border: 1px solid black;
    background-color: #374149;
}

问题原因 #

1. JS执行时机过早：当读取box[0].offsetHeight时，.vclBox内部的图片可能还未加载完成，此时容器高度是未被图片撑开的初始值（921）。后续图片加载完成后会撑大容器，导致基于初始值计算的图片尺寸和最终容器尺寸不匹配。
2. 属性读取错误：itemm.height获取的是图片的原始DOM属性值（即图片本身的固有高度），而非通过CSS设置后渲染到页面的实际高度，所以打印数值和预期不符。

解决方案 #

方案1：等待所有资源加载完成后执行代码 #

确保页面所有资源（包括图片）加载完毕再计算尺寸：

window.addEventListener('load', function() {
    const wi = box[0].offsetWidth;
    const he = box[0].offsetHeight;
    
    for (let h = 0; h < vclimgs.length; h++) {
        let itemm = vclimgs[h];
        // 用模板字符串简化写法
        itemm.style.width = `calc(${wi}px - 30%)`;
        itemm.style.height = `calc(${he}px - 40%)`;
        // 读取渲染后的实际高度用offsetHeight
        console.log(he);
        console.log(itemm.offsetHeight);
    }
});

方案2：监听单张图片加载事件 #

针对每张图片单独处理，避免缓存或加载顺序问题：

vclimgs.forEach(itemm => {
    const handleImageLoad = () => {
        const wi = box[0].offsetWidth;
        const he = box[0].offsetHeight;
        itemm.style.width = `calc(${wi}px - 30%)`;
        itemm.style.height = `calc(${he}px - 40%)`;
    };

    itemm.addEventListener('load', handleImageLoad);
    // 处理图片已缓存的情况
    if (itemm.complete) {
        handleImageLoad();
    }
});

方案3：纯CSS实现（优先推荐） #

如果图片的尺寸是相对于父容器.vclBox计算，直接用CSS控制更稳定，无需JS：

.vclBox img {
    width: calc(100% - 30%); /* 相对于父容器宽度减少30%，可根据需求调整 */
    height: calc(100% - 40%);
}

内容的提问来源于stack exchange，提问作者Dylan Pageot