feat(vue,nuxt): loaded event when image is loaded

Closes #32, #40

Author: johannschopplich

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

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

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(() => {

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),
   })
 })