Ребята, стоит такая задача. есть лист с айтемами. после загрузки

Question

Ребята, стоит такая задача. есть лист с айтемами. после загрузки

айтемов, картинки отображаются не сразу, а появляются по мере загрузки. и так получается, что картинки появляются в шахматном порядке (из-за веса картинки). а нужно, чтобы скелетон (или спиннер) крутился, пока загрузятся айтемы, потом полностью картинки и отобразить все разом.

сделал такое решение:
у компонента item, к тегу img повесил @load=“loaded”, как только картинка загрузится, функция loaded эмитит в itemList, в itemList, все это аккумулируется и сравнивается с длинной массива с айтемами. как только значения равняются, isLoading переходит false и отключается спиннер и отображаются айтемы.

<spinner v-if=“isLoading”/>
<div v-show=“!isLoading && items.length”>
<item v-for=“item in items”/>
</div>

такое решение норм?

#programming #russian #vue.js

0

29.04.2022

8 ответов

13 просмотров

Andrew Manuylov Автор вопроса

работать то работает. просто думается что решение не очень

0

29.04.2022

Andrew Manuylov Автор вопроса

Pavel Arsieiev
Ну а какие альтернативы? В целом логично, что айте...

я лично решение вижу на стороне бэка, чтобы сделать два варианта картинок: thumbnail и full и для списка юзать thumbnail) но такой возможности щас нет)

0

29.04.2022

Темир

через promise all грузишь?

0

29.04.2022

Andrew Manuylov Автор вопроса

что ты имеешь ввиду?

0

29.04.2022

Станислав Алимпиев

Andrew Manuylov
что ты имеешь ввиду?

Есть метод Promise.all() в которую закидываешь функцию которая должна будет выполниться большая работа типа импорта данных с одного сервера на другой.

0

29.04.2022

Andrew Manuylov Автор вопроса

айтемсы грузятся разом, ссылки на картинки вставляются в каждом айтеме

0

29.04.2022

Oleksandr

Andrew Manuylov
айтемсы грузятся разом, ссылки на картинки вставля...

тогда можно какой-то компьютед на массив обьектов создать когда картинка загрузилась - прокидывать на верх ивент и Vue.$set'ом сетить loaded=true а компьютед будет что-то типо того imagesLoaded() { return items.every(item=>item.loaded); }

0

29.04.2022

Pavel Arsieiev · Accepted Answer

Pavel Arsieiev

Andrew Manuylov
работать то работает. просто думается что решение ...

Ну а какие альтернативы? В целом логично, что айтемс лист собирает в себе инфу о том скока в нем айтемов отчитались о своей загрузке и отображает это спиннером

0

29.04.2022

169 похожих чатов

Ребята, стоит такая задача. есть лист с айтемами. после загрузки

8 ответов

Похожие вопросы