После нажатия на кнопку "сгенерировать новую картинку" я рандомно выбираю ее id и получаюurl картинки вида `images/static/${id}" , где id - id выбранной картинки и рендерю ее. После нажатия на кнопку, нужно чтобы вместо картинки был лоадер. Как только выбранная картинка подгрузилась, лоадер исчез и появилась сразу полученная картинка(не видим процесс ее загрузки. в момент загрузки видим лоадер) как можно сделать такое поведение на реакте?
В объекте state
заводите переменную loading
, когда начинаете загрузку картинки ставите её в true
, когда картинка загружена ставите false
.
В render
функции в зависимости от this.state.loading
выводите либо загрузчик, либо картинку.
{this.state.loading ? <div><img src="loader.gif"></div> :
<div>код вашей картинки</div>
}
Но в вашей ситуации можно предложить решение ещё лучше, делать предзагрузку картинки, пока смотришь одну, следующая уже подгружается. Таким образом у пользователя в обычном случае картинка будет отображаться сразу. Загрузчик тоже надо сделать, на случай если картинка всё-же не успела подгрузиться.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Дано целое число, большее 999Используя одну операцию деления нацело и одну операцию взятия остатка от деления, найти цифру, соответствующую...
Сейчас, на начало 2018 года, актуальны ли еще видеоуроки Sorax'a по JavaScript и CSS? Или они уже устарели?