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}