使用Javascript和Webpack加载图像数组吗？

Question

嗨，互联网的友好帮手，

我在编码网站上的图像加载性能方面遇到麻烦。我只使用香草Javascript和Webpack。

这个想法很简单，我正在加载4个50-100张图像的数组，每个数组都是5Mo。这些图像在滚动时变化以创建动画效果（例如apple airpods pro网站-> apple.com/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中使用它们，所以我不知道如何“延迟加载”它们。

提前感谢=）

Answer 1

确定，

我发现我只是在数组中堆叠路径，所以正确的导入功能是：

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

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

            image.src = src

            array.push(image)
        })
    }

那样，浏览器将正确加载每个图像。