0

После нажатия на кнопку "сгенерировать новую картинку" я рандомно выбираю ее id и получаюurl картинки вида `images/static/${id}" , где id - id выбранной картинки и рендерю ее. После нажатия на кнопку, нужно чтобы вместо картинки был лоадер. Как только выбранная картинка подгрузилась, лоадер исчез и появилась сразу полученная картинка(не видим процесс ее загрузки. в момент загрузки видим лоадер) как можно сделать такое поведение на реакте?

1 ответ 1

1

В объекте state заводите переменную loading, когда начинаете загрузку картинки ставите её в true, когда картинка загружена ставите false.

В render функции в зависимости от this.state.loading выводите либо загрузчик, либо картинку.

{this.state.loading ? <div><img src="loader.gif"></div> :
<div>код вашей картинки</div>
}

Но в вашей ситуации можно предложить решение ещё лучше, делать предзагрузку картинки, пока смотришь одну, следующая уже подгружается. Таким образом у пользователя в обычном случае картинка будет отображаться сразу. Загрузчик тоже надо сделать, на случай если картинка всё-же не успела подгрузиться.

2
  • а как отследить что картинка загрузилась? нужно события onLoad у Img?
    – werty
    4 фев 2018 в 11:18
  • @werty Image можно грузить через var img = new Image(); img.src="MyImage.jpg", и у img есть функция onLoad. 4 фев 2018 в 11:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.