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) {
>