Kurzdor
callbackRef + useState
Kurzdor
https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
🦜
Ihor
Китикет
Никита Суханов
Nick, [22.05.19 21:10]
export default ({ getInputValue, onSubmit, searchBar, accessClue }) => {
const [imgIsLoading, disableLoading] = useState(true);
const logo = <img onLoad={_ => disableLoading(false)} src={logoSrc} />
return (
<div className="header">
{imgIsLoading ? <Loader extraCLass="img-loader" src={imgLoader} /> : logo}
<SearchPanel accessClue={accessClue} searchBar={searchBar} onSubmit={onSubmit} getInputValue={getInputValue} />
</div>
)
} — пытаюсь дождаться загрузки картинки, до этого отображать лоадер. что не так?
Viktor
Effector бери, не ошибёшься
По статье на медиуме, я не очень понял, чем существенно отличается от rxjs
Andrei
фу какой код пахнущий
Vladimir
выглядит клево, я вот посматриваю на него.
А есть ли кто писал что-то боевое с использованием эффектора?
Хорошо ли себя показало ? Не было ли дифицита возможностей?
дефицита возможностей не было, был дефицит документации и бест практисов. Делал на нем петпрожект 3к строк
Dmitriy
a?.()
wtf
Default
Это как раз та причина, почему он всё ещё stage 1
Default
По задумке, чтобы избегать случаев shiet is not a function
Default
Но выглядит это дело отвратительно
Ilya
Nick, [22.05.19 21:10]
export default ({ getInputValue, onSubmit, searchBar, accessClue }) => {
const [imgIsLoading, disableLoading] = useState(true);
const logo = <img onLoad={_ => disableLoading(false)} src={logoSrc} />
return (
<div className="header">
{imgIsLoading ? <Loader extraCLass="img-loader" src={imgLoader} /> : logo}
<SearchPanel accessClue={accessClue} searchBar={searchBar} onSubmit={onSubmit} getInputValue={getInputValue} />
</div>
)
} — пытаюсь дождаться загрузки картинки, до этого отображать лоадер. что не так?
img так и не попадает в DOM. {imgIsLoading ? <Loader extraCLass="img-loader" src={imgLoader} /> : logo}
Никита Суханов
img так и не попадает в DOM. {imgIsLoading ? <Loader extraCLass="img-loader" src={imgLoader} /> : logo}
понимаю, но придумать не получается
Никита Суханов
Никита Суханов
ну просто рисуй logo всегда. Остальное можно, к примеру, стилями решить.
она место занимает на странице
Ilya
реши это стилями
Ilya
Пока не загужеро - повешай доп класс который его скроет. Тут тебе придется изучить тему какие именно стили спрячут но не заблакируют загрузку. Первое что приходит в голову это widht: 1px; height: 1px; clip: rect(0, 0). Возможно есть вариант изящнее
Dmitry
🦜
Никита Суханов
Ilya
display none
скорее всего часть браузеров(а может и все) решат что не нужно грузить картинку если display none
Sergey
Никита Суханов
скорее всего часть браузеров(а может и все) решат что не нужно грузить картинку если display none
это же реакт. Разве это не решается стейтом?
Никита Суханов
костыли какие-то
Китикет
я не про онлоад, а про эту карусель со стилями
А я тебе про нее и отвечаю, с display: none не сработает
Ilya
ну точн костыли
в чем костыль? Браузер не загружает каринки с display none. Навесить один лишний класс в зависимости от стиля - не проблема.
Китикет
ну точн костыли
Хотя я не могу со 100% уверенностью заявить что при display: none не загрузится, может и загрузиться, но не везде, как уже писал Илья выше
Китикет
Проще поставить visibility и т.д., чтобы наверняка
Никита Суханов
в чем костыль? Браузер не загружает каринки с display none. Навесить один лишний класс в зависимости от стиля - не проблема.
в зависимости от того загрузилась ли картинка отображать компонент картинки, иначе - лоадер. С помою стейта. Так не получится?
Китикет
место под картинку останется)
А, ну да, но есть куча способов убрать ее куда угодно, но ему не нравится))
Ilya
в зависимости от того загрузилась ли картинка отображать компонент картинки, иначе - лоадер. С помою стейта. Так не получится?
еще раз. Если ты не выведешь картику - она и не будет грузится
Ilya
в зависимости от того загрузилась ли картинка отображать компонент картинки, иначе - лоадер. С помою стейта. Так не получится?
можешь загрузить картинку через JS)
Китикет
асинхроном?
Создается элемент img через createElement, ему присваивается нужный src атрибут, и картинка грузится, магия
Ilya
я не помню уже деталей
Никита Суханов
Угу, благодарю
Никита Суханов
разницы не будет, если через document.createElem и newImage
G.
разницы не будет, если через document.createElem и newImage
А у тебя размер изображения заранее известен?
Никита Суханов
не очень понял вопрос
Китикет
разницы не будет, если через document.createElem и newImage
https://stackoverflow.com/questions/6241716/is-there-a-difference-between-new-image-and-document-createelementimg
Th0r
или контент-менеджер забыл подогнать очередную картинку
Никита Суханов
какая разница? они не грузятся - лоадер
Никита Суханов
все получилось
Никита Суханов
через документ
G.
скорее всего, нет
Если размер известен, возможно твою задачу можно решить с помощью перекрывания img поверх блоком с лоадером, и скрытием его на onLoad
Никита Суханов
const myLogo = document.createElement('img')
myLogo.src = logoSrc;
export default ({ getInputValue, onSubmit, searchBar, accessClue }) => {
const [imgIsLoading, disableLoading] = useState(true);
myLogo.onload = _ => {
disableLoading(false)
console.log(myLogo);
}
return (
<div className="header">
{imgIsLoading ? <Loader extraCLass="img-loader" src={imgLoader} /> : myLogo}
<SearchPanel accessClue={accessClue} searchBar={searchBar} onSubmit={onSubmit} getInputValue={getInputValue} />
</div>
)
}
Никита Суханов
Никита Суханов
ругается на myLogo, мол это объект, а я пытаюсь его в дом запихнуть
Никита Суханов
хотя в консоль явно img выводит
Ilya
ругается на myLogo, мол это объект, а я пытаюсь его в дом запихнуть
дак не надо пытаться пихать туда DOM элемент
Никита Суханов
мне при его загрузке нужно его показать