feat: Lazyload images below the fold (#123)

evadecker · Nov 20, 2023 · d84014e · d84014e
1 parent ed48ce9
commit d84014e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/lib/components/CoverCard.svelte b/src/lib/components/CoverCard.svelte
@@ -10,6 +10,7 @@
   export let original: Album | null = null;
   export let cover: Album | null = null;
   export let slug: string | null = null;
+  export let lazy: boolean = false;
 
   let isSkeleton = false;
   if (!original && !cover && !slug) isSkeleton = true;
@@ -19,12 +20,20 @@
   <div class="albums">
     <div class="album">
       {#if original?.album_img}
-        <img src={original.album_img[1]} alt={`${original.name} album art`} />
+        <img
+          src={original.album_img[1]}
+          alt={`${original.name} album art`}
+          loading={lazy ? 'lazy' : 'eager'}
+        />
       {/if}
     </div>
     <div class="album">
       {#if cover?.album_img}
-        <img src={cover.album_img[1]} alt={`${cover.name} album art`} />
+        <img
+          src={cover.album_img[1]}
+          alt={`${cover.name} album art`}
+          loading={lazy ? 'lazy' : 'eager'}
+        />
       {/if}
     </div>
   </div>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -101,8 +101,13 @@
     </div>
   {:else}
     <div class="coversGrid">
-      {#each value.covers as cover}
-        <CoverCard original={cover.original} cover={cover.cover} slug={cover.slug} />
+      {#each value.covers as cover, index}
+        <CoverCard
+          original={cover.original}
+          cover={cover.cover}
+          slug={cover.slug}
+          lazy={index > 5}
+        />
       {/each}
     </div>
     <div class="pagination">