feat: lazy load gallery

pnpm-lock.yaml

@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   googleapis:
     specifier: ^128.0.0
@@ -2979,3 +2975,7 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false

src/lib/components/ImageFrame.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-
 	export let src: string;
 	export let alt = '';
+	export let loading: 'eager' | 'lazy' | undefined = undefined;
 	const u = new URL(src);
 	const filename = u.pathname.split('/').pop() || '9a8sda';
 	const int = (parseInt(filename?.slice(0, 8), 16) % 7) + 1;
@@ -31,7 +30,7 @@
 		<source srcset="{frame}.webp" type="image/webp" />
 
 		<!-- If neither AVIF nor WebP are supported, load PNG format -->
-		<img src="{frame}.png" alt="Painting Frame" />
+		<img src="{frame}.png" alt="Painting Frame" {loading} />
 	</picture>
 
 	<img src="/hang.png" class="hang" alt="painting hanging cord" />

src/routes/gallery/+page.svelte

@@ -37,7 +37,7 @@
 				class="item"
 				class:active={item.noble_name === last_name}
 			>
-				<ImageFrame src={item.portrait} />
+				<ImageFrame src={item.portrait} loading="lazy" />
 				<p>{item.noble_name}</p>
 			</div>
 		{/each}