如何预加载图片并在显示前获取属性？naturalWidth始终返回0

原代码存在的核心问题 #

• for...in遍历错误：for...in遍历数组时返回的是索引值，而非图片路径，导致image.src = picture实际是把数字索引赋值给了图片地址，完全不符合预期。
• 忽略图片加载的异步性：设置图片src后，图片不会立刻加载完成，此时直接读取naturalWidth必然返回0——只有图片加载完成后才能获取真实的原生尺寸。
• 复用单个Image对象的风险：重复给同一个Image实例设置src会中断之前的加载请求，导致无法正确获取所有图片的尺寸数据。

修复后的代码实现 #

利用Promise异步加载所有图片，确保全部加载完成后再计算最大宽度，同时兼容图片数量动态变化的场景：

var pictures = ["CodeTalker.jpg", "challenger.jpg", "Hotline.jpg", "EarliestDigraphic.jpg", "Bombe.jpg", "SIGABA.jpg", "SIGCALYSign.jpg", "Cray.jpg"];
var maxWidth = 0;
var currentPic = 0;

// 封装加载单张图片并返回宽度的Promise
function getImageNaturalWidth(src) {
    return new Promise((resolve) => {
        const img = new Image();
        img.src = src;
        img.loading = "eager";
        // 加载完成后返回原生宽度
        img.onload = () => resolve(img.naturalWidth);
        // 处理加载失败的情况，默认返回0可根据需求调整
        img.onerror = () => resolve(0);
    });
}

// 批量加载所有图片并计算最大宽度
async function calculateMaxWidth() {
    // 生成所有图片的加载Promise数组
    const widthPromises = pictures.map(src => getImageNaturalWidth(src));
    // 等待所有图片加载完成
    const allWidths = await Promise.all(widthPromises);
    // 计算最大宽度
    maxWidth = Math.max(...allWidths);
    
    // 此处执行依赖maxWidth的后续逻辑，比如设置轮播箭头位置
    console.log("最宽图片宽度：", maxWidth);
}

// 启动计算
calculateMaxWidth();

关键说明 #

• 每个图片使用独立的Image实例，避免加载请求互相干扰；
• 通过Promise.all确保所有图片加载完成后再计算最大值，彻底解决异步问题；
• 兼容图片加载失败的场景，避免整个流程中断；
• 因为是异步操作，所有依赖maxWidth的逻辑必须放在calculateMaxWidth的异步回调中，或者等待该函数执行完成后再调用。

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