Как предварительно загрузить изображения в React.js?

Как предварительно загрузить изображения в React.js? У меня есть компонент выпадающего выделения, который работает как меню, но мне нужно предварительно загружать значки изображений для элементов, потому что иногда они не видны при первом открытии.

Я пробовал:

https://github.com/sambernard/react-preload

https://github.com/wizardzloy/react-img-preload

У первого есть хороший API, который легко понять и использовать, но это пустая консоль с предупреждением о том, что изображения не были загружены, даже когда они были. Второй имеет странный API, но я попробовал пример, и он ничего не загружал.

Поэтому мне, вероятно, нужно что-то реализовать самостоятельно, но не знаю с чего начать. Или другая возможность - загрузить их с помощью webpack.

Ответ 1

Предположим, у вас есть pictures: string[]; - массив картинок URL, определенных в ваших компонентах реквизита. Вы должны определить метод componentDidMount() в вашем компоненте, а затем просто создать новый объект Image для каждого изображения, которое вы хотите предварительно загрузить:

componentDidMount() {
    this.props.pictures.forEach((picture) => {
        const img = new Image();
        img.src = picture.fileName;
    });
}

Это заставляет браузер загружать все изображения. Этот пример написан на TypeScript.

Ответ 2

Если это только о доставке нескольких небольших "значков" - (почему бы не использовать шрифты?) - и если сервер обслуживает файлы gzipped, вы можете использовать base64, например.

В противном случае, если выбор не сразу отображается, вы также можете добавить теги img (с display: none) в предыдущий HTML. Другой способ - добавить объекты изображения в DOM и дождаться .onload перед отображением компонента (этот подход используется указанными вами библиотеками).

Насколько я могу себе представить, веб-пакет или реакция не могут сделать ничего особенного для вас здесь. Это что-то на стороне клиента, и это всего лишь инструменты для реализации вашего собственного API предварительной загрузки (или даже использовать существующие API в JS/TS, React, Angular,......)

Ответ 3

Это работает:

import im1 from 'img/im1.png'
import im2 from 'img/im2.png'
import im3 from 'img/im3.png'

componentDidMount() {
    imageList = [im1, im2, im3]
    imageList.forEach((image) => {
        new Image().src = image
    });
}

Ответ 4

Я думаю, что лучший способ заключается в использовании данных URI для изображений

componentWillMount() {
   this.setState({image: "data:image/gif;base64,R0lGODlhEAAQAMQA..."})
}

render() {
   <img src={this.state.image} />
}