使用Javascript加载图像数组&；网页包？

嗨，互联网的友好帮手们

我在编码的网站上加载图像时遇到问题。我只使用香草Javascript和网页包

这个想法很简单，我加载了4个阵列，每个阵列有50-100个图像，每个阵列都是5Mo。 这些图像在滚动时会发生变化，从而产生动画效果（如apple airpods pro网站->）

下面是我加载这些图像的方式：

let homeImages = []
let aboutImages = []
let teamImages = []
let clientsImages = []

function importAll(r, array) {
    array.push(r.keys().map(r))
}

function createImagesArrays() {
    importAll(require.context('../assets/images/home/', false, /\.(png|jpe?g|svg)$/), homeImages)
    importAll(require.context('../assets/images/about/', false, /\.(png|jpe?g|svg)$/), aboutImages)
    importAll(require.context('../assets/images/team/', false, /\.(png|jpe?g|svg)$/), teamImages)
    importAll(require.context('../assets/images/clients/', false, /\.(png|jpe?g|svg)$/), clientsImages)
}

一旦加载它们，我只需在滚动计数器增加时选择它们，并将静态固定背景的来源设置为当前索引

这种效果在本地环境下非常有效，但当涉及到3G边缘连接时（是的，我们在法国仍有一些用户被迫使用边缘），图像加载速度不够快

在用户进入网站之前，是否有一种智能的方式来加载它们？因为我没有在html中直接使用它们，所以我不知道如何“延迟加载”它们

提前感谢=）

好的

我发现我只是在阵列中堆叠路径，因此正确的导入函数是：

    importAll(r, array) {
        const allImages = r.keys().map(r)

        allImages.forEach(src => {
            const image = new Image()

            image.src = src

            array.push(image)
        })
    }

---

这样，浏览器就能正确加载每个图像。

我帮不了你更多。。但我可以给你们一些片段，然后你们工作和玩耍，好吗？那就告诉我