From eb043d91918ca9b093511e70e6d8ce2a6e33db0f Mon Sep 17 00:00:00 2001
From: Johann Schopplich <mail@johannschopplich.com>
Date: Sun, 7 Jan 2024 11:34:29 +0100
Subject: [PATCH] feat(vue,nuxt): `loaded` event when image is loaded Closes
 #32, #40

---
 docs/integrations/nuxt.md                            | 6 ++++++
 docs/integrations/vue.md                             | 6 ++++++
 packages/nuxt/src/runtime/components/UnLazyImage.vue | 9 ++++++++-
 packages/vue/src/components/UnLazyImage.vue          | 5 +++++
 4 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/docs/integrations/nuxt.md b/docs/integrations/nuxt.md
index 46ee8d7..89ddecd 100644
--- a/docs/integrations/nuxt.md
+++ b/docs/integrations/nuxt.md
@@ -96,6 +96,12 @@ The `UnLazyImage` component accepts the following props:
 | `preload` | Boolean | A flag to indicate whether the image should be preloaded, even if it's not in the viewport yet. |
 | `ssr` | Boolean | Whether the ThumbHash or BlurHash should be decoded on the server. Overrides the global module configuration if set. |
 
+### Emitted Events
+
+| Event | Description |
+| --- | --- | --- |
+| `loaded` | Emitted when the image has been loaded. The event payload is the image element itself. |
+
 ## Examples
 
 ::: tip
diff --git a/docs/integrations/vue.md b/docs/integrations/vue.md
index 43923b0..5663831 100644
--- a/docs/integrations/vue.md
+++ b/docs/integrations/vue.md
@@ -68,6 +68,12 @@ The `UnLazyImage` component accepts the following props:
 | `placeholderSize` | Number | The size of the longer edge (width or height) of the BlurHash image to be decoded, depending on the aspect ratio. This option only applies when the `blurhash` prop is used. |
 | `preload` | Boolean | A flag to indicate whether the image should be preloaded, even if it's not in the viewport yet. |
 
+### Emitted Events
+
+| Event | Description |
+| --- | --- | --- |
+| `loaded` | Emitted when the image has been loaded. The event payload is the image element itself. |
+
 ## Examples
 
 ::: code-group
diff --git a/packages/nuxt/src/runtime/components/UnLazyImage.vue b/packages/nuxt/src/runtime/components/UnLazyImage.vue
index 00830eb..e068616 100644
--- a/packages/nuxt/src/runtime/components/UnLazyImage.vue
+++ b/packages/nuxt/src/runtime/components/UnLazyImage.vue
@@ -64,6 +64,10 @@ const props = withDefaults(
   },
 )
 
+const emit = defineEmits<{
+  (event: 'loaded', image: HTMLImageElement): void
+}>()
+
 const unlazy = useRuntimeConfig().public.unlazy as ModuleOptions
 const hash = computed(() => props.thumbhash || props.blurhash)
 
@@ -113,7 +117,10 @@ watchEffect(() => {
     return
 
   // Placeholder is already decoded
-  cleanup = lazyLoad(target.value, { hash: false })
+  cleanup = lazyLoad(target.value, {
+    hash: false,
+    onImageLoad: image => emit('loaded', image),
+  })
 })
 
 onBeforeUnmount(() => {
diff --git a/packages/vue/src/components/UnLazyImage.vue b/packages/vue/src/components/UnLazyImage.vue
index 0b0e649..0307b24 100644
--- a/packages/vue/src/components/UnLazyImage.vue
+++ b/packages/vue/src/components/UnLazyImage.vue
@@ -28,6 +28,10 @@ const props = defineProps<{
   preload?: boolean
 }>()
 
+const emit = defineEmits<{
+  (event: 'loaded', image: HTMLImageElement): void
+}>()
+
 const target = ref<HTMLImageElement | undefined>()
 let cleanup: (() => void) | undefined
 
@@ -48,6 +52,7 @@ watchEffect(() => {
     hash: props.thumbhash || props.blurhash,
     hashType: props.thumbhash ? 'thumbhash' : 'blurhash',
     placeholderSize: props.placeholderSize,
+    onImageLoad: image => emit('loaded', image),
   })
 })