Всем добрый день, кто-нибудь работал с lazy loading-ом?

Question

Vue.js — русскоговорящее сообщество

Амаль Досхоев

Всем добрый день, кто-нибудь работал с lazy loading-ом?

#frontend #javascript #programming #russian #vue.js

0

16.11.2023

3 ответов

16 просмотров

Амаль Досхоев Автор вопроса

В кратце: использую библиотеку для ленивой загрузки, называется vue-intersection (версия vue 2) код вывода: <template> <IntersectionRoot class="meal-list" :threshold="[0.1]" :rootMargin="rootMargin"> <IntersectionChild v-for="item in items" :key="item.id" @enter="setItemVisibility(item.id)"> <div v-if="isItemVisible(item.id)" class="skeleton">Element visible</div> <div v-else class="skeleton">Element not visible</div> </IntersectionChild> </IntersectionRoot> </template> Вот методы и начальное значение: <script> import { IntersectionRoot, IntersectionChild } from 'vue-intersection' export default { components: { IntersectionRoot, IntersectionChild }, name: 'MealList', data() { return { visibleItems: [], rootMargin: "100px" } }, props: { items: Array } methods: { setItemVisibility(itemId) { if (!this.visibleItems.includes(itemId)) { this.visibleItems.push(itemId) } }, isItemVisible(itemId) { // Проверяем видимость элемента в реактивном свойстве return this.visibleItems.includes(itemId) || false; }, }, } </script> Проблема заключается в том, что они сразу становятся visible, может я как то неправильно использую реактивность?

0

16.11.2023

lleeuuuaaaanchik

Амаль Досхоев
В кратце: использую библиотеку для ленивой загрузк...

а как вы текст в таком виде отправляете?

0

16.11.2023

Ruslan · Accepted Answer

Ruslan

Амаль Досхоев
В кратце: использую библиотеку для ленивой загрузк...

Вот тут элементарная реализация без всяких библиотек https://vue-faq.org/book/ru/Chapter_11__Bonus_Chapter_-_UX_Patterns.html?v=2 Поищи по тексту по IntersectionObserver

0

16.11.2023

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

Всем добрый день, кто-нибудь работал с lazy loading-ом?

3 ответов

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