From 526aae1de2200433fc04e5fd6bef59ff94ecda36 Mon Sep 17 00:00:00 2001
From: zyxd <zyxd@syncraft.ru>
Date: Thu, 11 Sep 2025 21:33:08 +0400
Subject: [PATCH] =?UTF-8?q?=D0=92=D0=BE=D0=B7=D0=B2=D1=80=D0=B0=D1=89?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=BE=20=D0=BF=D0=BE=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20Image?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                    | 2 +-
 src/lib/components/Image.svelte | 9 ++++++++-
 src/routes/+page.svelte         | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 81412a2..fcd17a3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncraft/svelte-ui",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
index e7e6b1d..23ece06 100644
--- a/src/lib/components/Image.svelte
+++ b/src/lib/components/Image.svelte
@@ -1,5 +1,5 @@
 <img
-  onload={() => loaded = true}
+  bind:this={node}
   class:loaded
   class="noscript-visible"
   {loading}
@@ -20,7 +20,14 @@
     ...others
   } = $props()
 
+  let node = $state()
   let loaded = $state(false)
+
+  $effect(() => node.addEventListener(
+    'load',
+    () => loaded = true,
+    { once: true }
+  ))
 </script>
 
 <style lang="scss">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7d2d825..4865c64 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,7 +6,7 @@
 
 {#if visible}
   <div class="image">
-    <Image src="/favicon.svg" style="object-fit: contain;"/>
+    <Image src="/favicon.svg" style="object-fit: contain;" onload={() => console.log('loaded')}/>
   </div>
 {/if}