From 07b07f38e0c465b3a4b4bfa38c2e5b2b9eda092f Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Fri, 12 May 2023 13:28:51 +0530
Subject: [PATCH] Lazy loading

---
 sites/svelte.dev/src/routes/+page.svelte             |  4 ++--
 sites/svelte.dev/src/routes/_components/Image.svelte | 10 ++++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/sites/svelte.dev/src/routes/+page.svelte b/sites/svelte.dev/src/routes/+page.svelte
index c1a78f4523..cad807244c 100644
--- a/sites/svelte.dev/src/routes/+page.svelte
+++ b/sites/svelte.dev/src/routes/+page.svelte
@@ -63,9 +63,9 @@
 <Supporters />
 
 {#if $theme.current === 'light'}
-	<Image src={BallsLight} alt="The Svelte logo in a ball pit" />
+	<Image lazy src={BallsLight} alt="The Svelte logo in a ball pit" />
 {:else}
-	<Image src={BallsDark} alt="The Svelte logo in a ball pit" />
+	<Image lazy src={BallsDark} alt="The Svelte logo in a ball pit" />
 {/if}
 
 <footer>
diff --git a/sites/svelte.dev/src/routes/_components/Image.svelte b/sites/svelte.dev/src/routes/_components/Image.svelte
index 423cf87430..c98266ce8e 100644
--- a/sites/svelte.dev/src/routes/_components/Image.svelte
+++ b/sites/svelte.dev/src/routes/_components/Image.svelte
@@ -5,14 +5,20 @@
 	/** @type {string} */
 	export let alt;
 
-	console.log(src);
+	export let lazy = false;
 </script>
 
 <picture>
 	{#each Object.entries(src?.sources ?? {}) as [format, images]}
 		<source srcset={images?.map((i) => `${i?.src} ${i?.w}w`).join(', ')} type="image/{format}" />
 	{/each}
-	<img height={src.img.h} width={src.img.w} src={src?.img?.src} {alt} />
+	<img
+		loading={lazy ? 'lazy' : 'eager'}
+		height={src.img.h}
+		width={src.img.w}
+		src={src?.img?.src}
+		{alt}
+	/>
 </picture>
 
 <style>