JavaScript引用多个具有相似名称的图像，而不链接到每个图像

我有下面的代码，它根据图像数组选择背景图像。问题是，我有大约200张图片，我希望有一种更快的方式将它们全部放入图片数组，而不是像我目前拥有的6张那样列出每张图片。它们有非常相似的名称（即image001、image002、…image200），因此如果以某种方式可以将数字添加到“图像”中

这会节省我很多时间和空间。代码如下

var images = [
'image0.png',
'image1.png',
'image2.png',
'image3.png',
'image4.png',
'image5.png'
];

$("#container").on("scroll", function(){
var $container = $("#container");
var $content = $("#content");
var totalScrollAmount = $content.height() - $container.height();
var percentScrolled = $container.scrollTop() / totalScrollAmount;
$content.css({
    background:"url("+images[Math.floor(percentScrolled * images.length)]+")"
});
});

var-images=[]；
对于（变量i=0；i<200；i++）
push（“image”+（“000”+i）.substr（-3,3）+.png”）；

这是一个作为生命体编写的生成器

var images=（函数（maxlen、arr、i）{
函数pad3（i）{//helper
返回（'000'+i）.切片（-3）；
}
arr | |（arr=[]）；//默认值
i | |（i=0）；
arr.length=maxlen；
对于（；i

这似乎很简单。我可以把它放在数组中，而不必更改代码中的任何其他内容，我的代码的功能与我单独链接到所有图像时的功能完全相同吗？

var images = [];
for(var i = 0; i < 200; i++)
  images.push("image" + ("000" + i).substr(-3, 3) + ".png");

var images = (function (maxlen, arr, i) {
    function pad3(i) { // helper
        return ('000' + i).slice(-3);
    }
    arr || (arr = []); // defaults
    i || (i = 0);
    arr.length = maxlen;
    for (; i < maxlen; ++i) { // do the loop
        arr[i] = 'image' + pad3(i) + '.png';
    }
    return arr;
}(3)); // 3 for 3 items

images; // ["image000.png", "image001.png", "image002.png"]