From 7da0d7612aa1f4dd4e68ad2501502920aa8ea737 Mon Sep 17 00:00:00 2001
From: Phumrapee Limpianchop <git@rayriffy.com>
Date: Sun, 12 Nov 2023 02:44:49 +0900
Subject: [PATCH] feat: more stable onload event (#19)

---
 .changeset/twelve-buckets-know.md |  5 +++++
 packages/svelte/src/Image.svelte  | 22 +++++++++++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/twelve-buckets-know.md

diff --git a/.changeset/twelve-buckets-know.md b/.changeset/twelve-buckets-know.md
new file mode 100644
index 0000000..e0758c6
--- /dev/null
+++ b/.changeset/twelve-buckets-know.md
@@ -0,0 +1,5 @@
+---
+"@urami/svelte": major
+---
+
+`on:load` dispatch event is now more accurate than native behavior
diff --git a/packages/svelte/src/Image.svelte b/packages/svelte/src/Image.svelte
index a9c050c..3af51fc 100644
--- a/packages/svelte/src/Image.svelte
+++ b/packages/svelte/src/Image.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+
   import { defaultLoader, buildSource } from '@urami/utils'
   import type { Loader } from '@urami/types'
 
+  const dispatch = createEventDispatcher()
+
   export let src: string
   export let width: number
   export let height: number | undefined = undefined
@@ -14,15 +18,27 @@
 
   export let loader: Loader = defaultLoader
 
-  $: buildProps = buildSource(loader, src, width, quality)
+  let imageElement: HTMLImageElement | undefined
+  let loaded = false
+
+  const handleLoad = () => {
+    if (loaded) return
+    loaded = true
+    dispatch('load')
+  }
+
+  $: builtProps = buildSource(loader, src, width, quality)
+  $: if (imageElement?.complete) handleLoad()
 </script>
 
 <!-- svelte-ignore a11y-missing-attribute -->
 <img
-  src={buildProps.src}
-  srcset={buildProps.srcSet}
+  bind:this={imageElement}
+  src={builtProps.src}
+  srcset={builtProps.srcSet}
   decoding="async"
   loading="lazy"
+  on:load={handleLoad}
   {...$$restProps}
   {...{
     alt,