Загрузить массив изображений с Javascript и Webpack? - PullRequest
Новая
       2

Загрузить массив изображений с Javascript и Webpack?

0 голосов
/ 29 января 2020

Привет, дружелюбные помощники inte rnet,

У меня проблемы с загрузкой изображений на сайте, который я кодирую. Я использую только 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)
}

Когда они загружены, я просто выбираю их по мере увеличения счетчика прокрутки и устанавливаю источник моего фиксированного фона c для текущего индекса.

Эффект отлично работает в локальной среде, но когда дело доходит до 3G-соединения (да, у нас все еще есть пользователи, вынужденные использовать Edge во Франции), изображения загружаются недостаточно быстро.

Есть ли разумный способ загрузить их до того, как пользователь заходит на сайт? Поскольку я не использую их напрямую в html, я не знаю, как их «лениво загрузить».

Заранее спасибо =)

1 Ответ

0 голосов
/ 06 февраля 2020

Хорошо,

Я понял, что в моем массиве только стеки, поэтому правильная функция импорта была: 

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

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

            image.src = src

            array.push(image)
        })
    }

Таким образом, браузер корректно загружает каждое изображение .

...