diff --git a/summer2024-frontend/src/components/PostComponent.vue b/summer2024-frontend/src/components/PostComponent.vue index 960dec2..799d474 100644 --- a/summer2024-frontend/src/components/PostComponent.vue +++ b/summer2024-frontend/src/components/PostComponent.vue @@ -12,10 +12,14 @@ const postDataTitle = ref(null) const postDataDescription = ref(null) const postActionBtn = ref(null) +let slidesContainer = ref(null) +let fpCurrentSlide = 0 + defineEmits(['scrollableelemententer', 'scrollableelementleave']) function onVisible() { document.addEventListener('keydown', onFullpageKeyDown) + lazyLoadImage(slidesContainer.value.children[0]) } function onInvisible() { @@ -67,9 +71,6 @@ function postDataToggle() { } } -let slidesContainer = ref(null) -let fpCurrentSlide = 0 - function scrollSlideDir(direction) { scrollSlideToIndex( (((fpCurrentSlide + direction) % slidesContainer.value.children.length) + @@ -101,8 +102,22 @@ function playChildrenVideo(element) { } } +function lazyLoadImage(element) { + for (const child of element.children) { + if (child.nodeName === 'IMG') { + if (!child.src && child.dataset.src) + child.src = child.dataset.src + return + } else { + lazyLoadImage(child) + } + } +} + function scrollSlideToIndex(index) { const fromSlide = slidesContainer.value.children[fpCurrentSlide] + const toSlide = slidesContainer.value.children[index] + lazyLoadImage(toSlide) stopChildrenVideo(fromSlide) slidesContainer.value.scroll({ top: 0, @@ -110,7 +125,6 @@ function scrollSlideToIndex(index) { behavior: 'smooth' }) fpCurrentSlide = index - const toSlide = slidesContainer.value.children[index] playChildrenVideo(toSlide) } @@ -167,12 +181,12 @@ function scrollSlideToIndex(index) { >