Как поменять background-image только после загрузки самого изображения react?

Question

[Vanya Huk]

есть код елемента:

<div
			className={'photo-item'}
			style={{backgroundImage: 'url(' + this.props.item.preview + ')'}}
		>
                </div>

this.props.item.preview - url изображения, которое приходит от сервера.
Как сделать чтобы backgroundImage менялся только после загрузки изображения?

ато как только меняеться url this.props.item.preview
на 2-3 секунды пропадает картинка

Answer 1

[Максим]

Это можно сделать с помощью new Image()и подписки на onload событие.
Пример взят из кода к учебнику по redux

class BigPhoto extends React.Component {
  state = {
    isLoading: false,
  }
  componentDidMount() {
    this.loadImage(this.props.url)
  }
  loadImage = src => {
    this.setState({ isLoading: true })

    let img = new Image()
    img.onload = () => {
      this.setState({ isLoading: false })
    }

    img.src = src
  }
  render() {
    const { isLoading } = this.state
    const { url } = this.props
    return isLoading ? <p>Загружаю...</p> : <img src={url} alt="big vk" />
  }
}

Главное помнить, что загрузка изображения начинается только тогда, когда ему проставлен атрибут src. Функция обработчик на onload должна быть определена заранее! В данном подходе мы используем нативный функционал браузера и js, это подходит не только к react