frontend: fix lazy loading

Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>

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)
 }
 </script>
@@ -167,12 +181,12 @@ function scrollSlideToIndex(index) {
       >
         <img
           class="absolute top-0 left-0 w-full h-dvh object-cover -z-10"
-          :src="asset.presignedUrl"
+          :data-src="asset.presignedUrl"
           v-if="asset.contentType.startsWith('image/')"
-          loading="lazy"
         />
         <video
           class="absolute top-0 left-0 w-full h-dvh object-cover -z-10"
+          preload="none"
           loop
           muted="true"
           playsinline