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

260
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>
}

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

READ ALSO
Правильно я решил задачу в условиях JS?

Правильно я решил задачу в условиях JS?

Дано целое число, большее 999Используя одну операцию деления нацело и одну операцию взятия остатка от деления, найти цифру, соответствующую...

213
пробелы вместо табов eslint

пробелы вместо табов eslint

Поставил проверку кода в редакторе WebStorm, eslintВот конфиг:

201
Актуальны ли еще видео Sorax&#39;a? [требует правки]

Актуальны ли еще видео Sorax'a? [требует правки]

Сейчас, на начало 2018 года, актуальны ли еще видеоуроки Sorax'a по JavaScript и CSS? Или они уже устарели?

187