Предварительно отображать изображения с URL в reactjs - PullRequest
0 голосов
/ 13 февраля 2020

Можно ли предварительно отобразить список изображений на основе URL, чтобы предотвратить первую загрузку на дисплей с помощью реакции или JS?

Заранее спасибо.

РЕДАКТИРОВАТЬ: У меня есть карусель изображений и все изображения отображаются по одному. Когда изображение отображается в первый раз, это изображение занимает некоторое время для рендеринга, потому что его нужно получить из URL. И если я покажу это же изображение во второй раз, я не буду ждать. Затем я хочу знать, есть ли решение для предварительной загрузки всех изображений непосредственно после получения URL-адреса в ComponentDidMount, даже если загрузка становится больше.

Другой пример: у меня есть список изображений, и я хочу отобразить их все в то же время. Как я могу предварительно загрузить их все до окончания загрузки и начала рендеринга.

1 Ответ

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

Не совсем понятно, что вы подразумеваете под предварительным рендерингом.

Под предварительной загрузкой вы подразумеваете, что хотите, чтобы компонент рендерился только тогда, когда изображение готово?

Если это так, вы могли бы сделать что-то вроде этого:

componentDidMount() {
  const img = new Image();
  img.src = Newman; // by setting an src, you trigger browser download

  img.onload = () => {
    // when it finishes loading, update the component state
    this.setState({ imageIsReady: true });
  }
}

render() {
  const { imageIsReady } = this.state;

  if (!imageIsReady) {
    return <div>Loading image...</div>; // or just return null if you want nothing to be rendered.
  } else {
    return <img src={Newman} /> // along with your error message here
  }
}
...