feat: more stable onload event (#19)

.changeset/twelve-buckets-know.md

@@ -0,0 +1,5 @@
+---
+"@urami/svelte": major
+---
+
+`on:load` dispatch event is now more accurate than native behavior

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,