дольше чем текст например, вешаю onLoad на картинку и вот что получилось, как можно сделать лучше или в этом плохого ничего нет ?
{!imgLoad && <span>Загрузка</span>}
<img style={{display: imgLoad ? 'block' : 'none'}} src={data.url} onLoad={e => __handleImgLoad(e)} />
__handleImgLoad тут просто делаю setImageLoad(true)
браузер будет грузить картинку, у которой display: none?
В момент загрузки компонента я получаю данные и передаю в img, в onLoad тега у меня сначала <img />, как только картинка готова <img src="link" />, получается мне нужно что бы тег img был в компоненте сразу. В моем коде я заменяю одно другим, пока картинка не готова, она display:none (т.к все равно не видна) и работает прелоадер, как то готова она block и прелоадер убирается из за условия
как вариант подставлять дефолное значение - заглушку в атрубут src
с прелоадером который отработает, ага спасибо
Хотя я туда же могу поставить заглужку картинки которой так же нужно время на отрисовку)
всё зависит от постановки задачи) с прелоадером вполне норм вариант
Открывается модалка и в ней картинка) Картинка с бека приходит при открытии модалки, но в доме отрисовывается не сразу, то есть может типа 1-2 секунды рисовать, я тем вариантом что описал вроде решил проблему, но не понимаю наговнякал ли я код или нет
наверное картинка тяжелая
мы у себя qr-коды шлём в base-64
Обсуждают сегодня