From 6561b24f75b08d0e6235e1762a5930bba56bf980 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 6 Apr 2020 13:00:34 +0200
Subject: [PATCH] Carousel: Load only visible and sibling photos

Reduces page load:
- Preload the current and 2 next and previous ones
- If first of last photo, load the 2 last or first ones on the list
---
 src/organisms/Carousel.svelte | 56 ++++++++++++++++++++++++++++-------
 1 file changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte
index 25a244d..c2a915a 100644
--- a/src/organisms/Carousel.svelte
+++ b/src/organisms/Carousel.svelte
@@ -8,6 +8,7 @@
 
     // Dependencies
     import SwipeListener from 'swipe-listener'
+    import lazySizes from 'lazysizes'
 
     // Animations
     import { animateIn } from 'animations/Carousel'
@@ -29,6 +30,34 @@
     $: prevPhoto = photos[currentIndex - 1] || photos[photos.length - 1]
     $: nextPhoto = photos[currentIndex + 1] || photos[0]
 
+    // Default size for the image
+    const defaultWidth = 900
+    const defaultHeight = Math.ceil(defaultWidth / 1.5)
+
+
+    // Get lazyload class
+    const getLazyloadClass = index => {
+        console.log(index, currentIndex)
+        // Preload current photo
+        if (index === currentIndex || index >= currentIndex - 2 && index <= currentIndex + 2) {
+            return true
+        }
+        // Preload the two previous and next photos
+        if (index >= currentIndex - 2 && index <= currentIndex + 2) {
+            return true
+        }
+        // If currentIndex = last photo, preload the two first ones
+        if (currentIndex === photos.length - 1 && (index === 0 || index === 1)) {
+            return true
+        }
+        // return false
+        // If currentIndex = first photo, preload the two last ones
+        // if (index) {
+
+        // }
+        return false
+    }
+
 
     /*
     ** Navigate to a photo
@@ -112,9 +141,7 @@
     */
     onMount(() => {
         // Entering transition
-        if (photos) {
-            animateIn(scope)
-        }
+        animateIn(scope)
 
         // Enable gestures
         const touch = SwipeListener(scope)
@@ -132,7 +159,6 @@
 
 <svelte:window on:keydown={keyboardNav} />
 
-{#if photos}
 <div class="carousel"
     bind:this={scope}
     on:swipe={event => swipe(event.detail.directions)}
@@ -148,11 +174,22 @@
                     on:click={openFullscreen}
                 >
                     <picture class="gallery__picture">
-                        <source media="(min-width: 968px)" srcset={getThumbnail(image.private_hash, 1200)}>
-                        <source media="(min-width: 800px)" srcset={getThumbnail(image.private_hash, 900)}>
-                        <source media="(min-width: 500px)" srcset={getThumbnail(image.private_hash, 600)}>
-                        <source media="(min-width: 300px)" srcset={getThumbnail(image.private_hash, 400)}>
-                        <img src="{getThumbnail(image.private_hash, 900)}" alt="{name}, {location.name}, {location.country.name}">
+                        <source media="(min-width: 968px)" data-srcset={getThumbnail(image.private_hash, 1200)}>
+                        <source media="(min-width: 800px)" data-srcset={getThumbnail(image.private_hash, 900)}>
+                        <source media="(min-width: 500px)" data-srcset={getThumbnail(image.private_hash, 600)}>
+                        <source media="(min-width: 300px)" data-srcset={getThumbnail(image.private_hash, 400)}>
+                        <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
+                            alt="{name}, {location.name}, {location.country.name}"
+                            width={defaultWidth} height={defaultHeight}
+                            class:lazyload={
+                                // Load the current index and the two previous/next ones
+                                index === currentIndex || index >= currentIndex - 2 && index <= currentIndex + 2
+                                // If last photo, load the two first ones (index = 0)
+                                || currentIndex === photos.length - 1 && (index === 0 || index === 1)
+                                // If first photo, load the two last ones (index = photos length)
+                                || currentIndex === 0 && (index === photos.length - 1 || index === photos.length - 2)
+                            }
+                        >
                     </picture>
                 </div>
                 {/each}
@@ -210,4 +247,3 @@
         on:goToIndex={event => currentIndex = event.detail}
     />
 </div>
-{/if}