使用JS设置页面img元素宽高属性及部分图片高度异常问题咨询

导致部分图片height属性赋值异常偏小主要有以下几个核心原因：

• 最常见的触发原因是宽高读取与设置的顺序错误：你当前的代码是先给img设置width属性，再读取clientHeight赋值。而img的width属性会直接影响浏览器对图片的渲染尺寸，设置完width后图片已经触发了重排，此时读取的clientHeight是宽度修改后的自适应高度，并非修改前的实际显示高度，自然会出现数值异常。
• 部分图片未完成加载就读取尺寸：如果异常图片带有loading="lazy"懒加载属性、是页面加载完成后动态插入的、或是加载速度较慢，哪怕触发了window.onload事件，这些图片还没完成加载，此时读取的clientHeight是占位图的高度或是0，赋值后自然无法正常显示。
• 静态NodeList的局限性：你在脚本初始化阶段就执行document.querySelectorAll('img')获取到的是静态集合，后续动态插入的图片不会被包含在内，若这些图片本身布局逻辑特殊也可能出现异常。

调整代码逻辑，先缓存读取到的宽高数值再统一设置属性，同时兼容未加载完成的图片：

// 单张图片设置属性的方法
const setSingleImageAttr = (img) => {
    // 等待图片加载完成再读取尺寸
    if (img.complete) {
        const curWidth = img.clientWidth;
        const curHeight = img.clientHeight;
        img.setAttribute('width', curWidth);
        img.setAttribute('height', curHeight);
    } else {
        img.addEventListener('load', () => {
            const curWidth = img.clientWidth;
            const curHeight = img.clientHeight;
            img.setAttribute('width', curWidth);
            img.setAttribute('height', curHeight);
        }, { once: true });
    }
}

const setImagesAttributes = () => {
    // 每次执行都重新获取img集合，包含动态插入的元素
    const images = document.querySelectorAll('img');
    images.forEach(img => setSingleImageAttr(img));
}

window.onload = () => {
    setImagesAttributes();
    window.addEventListener('resize', debounce(setImagesAttributes));
}

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