В момент загрузки картинки видим лоадер, затем сразу саму картинку - как сделать на React?

269

05 февраля 2018, 06:49

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

Answer 1

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

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

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

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