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

Question

嗨，互联网的友好帮手，

我在编写代码的网站上遇到图像加载性能问题。我只使用 vanilla 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)
        })
    }

这样，浏览器就会正确加载每张图片。

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

Load array of images with Javascript & Webpack?

javascript

performance

lazy-loading

image

webpack