如何实现符合编号命名规则的JavaScript批量图片预加载？

核心优化目标是去掉手动逐个传入图片地址的逻辑，在循环内自动完成三位补零序号拼接，直接生成符合img000.jpg格式的图片URL。

优化逻辑说明 #

• 废弃原有读取preload.arguments的手动传参模式，无需在调用函数时罗列所有图片地址
• 对循环计数变量做三位补零处理，自动生成000到180格式的序号
• 把图片基础路径抽成单独变量，后续修改存放路径只需要改一处即可
• 修正原有循环的终止条件，避免漏掉序号为180的最后一张图

优化后完整代码 #

var images = [];
var amount = 180;
// 替换为实际的图片存放基础路径
var baseImgPath = "...wp-content/uploads/2022/06/img";

function preload() {
    // 序号范围覆盖000到180，循环终止条件设为i <= amount
    for (var i = 0; i <= amount; i++) {
        images[i] = new Image();
        // 数字转字符串后补前导零到3位，拼接为完整图片地址
        var indexStr = i.toString().padStart(3, '0');
        images[i].src = `${baseImgPath}${indexStr}.jpg`;
    }
}

// 直接调用即可，不需要传入任何图片地址参数
preload();

老旧环境兼容写法 #

如果需要兼容不支持padStart方法的浏览器，可以把补零逻辑替换为字符串截取写法，效果完全一致：

// 替换上述代码中的indexStr赋值逻辑即可
var indexStr = ('00' + i).slice(-3);

内容的提问来源于stack exchange，提问作者Bjørn Karmann