feat: support load event for nuxt-img and nuxt-picture (nuxt#702)

procrates · Jan 23, 2023 · 60cd126 · 60cd126
1 parent 61bc66f
commit 60cd126
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/src/runtime/components/nuxt-img.ts b/src/runtime/components/nuxt-img.ts
@@ -13,6 +13,7 @@ export const imgProps = {
 export default defineComponent({
   name: 'NuxtImg',
   props: imgProps,
+  emits: ['load'],
   setup: (props, ctx) => {
     const $img = useImage()
     const _base = useBaseImage(props)
@@ -94,15 +95,20 @@ export default defineComponent({
       appendHeader(useRequestEvent(), 'X-Nitro-Prerender', sources.join(','))
     }
 
-    const imgEl = ref<HTMLImageElement>(null)
+    const imgEl = ref<HTMLImageElement>()
 
     onMounted(() => {
       if (placeholder.value) {
         const img = new Image()
         img.src = mainSrc.value
-        img.onload = () => {
-          imgEl.value.src = mainSrc.value
+        img.onload = (event) => {
+          imgEl.value!.src = mainSrc.value
           placeholderLoaded.value = true
+          ctx.emit('load', event)
+        }
+      } else {
+        imgEl.value!.onload = (event) => {
+          ctx.emit('load', event)
         }
       }
     })

diff --git a/src/runtime/components/nuxt-picture.ts b/src/runtime/components/nuxt-picture.ts
@@ -1,4 +1,4 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, defineComponent, ref, computed, onMounted } from 'vue'
 import { useBaseImage, baseImageProps } from './_base'
 import { useImage, useHead } from '#imports'
 import { getFileExtension } from '#image'
@@ -12,6 +12,7 @@ export const pictureProps = {
 export default defineComponent({
   name: 'NuxtPicture',
   props: pictureProps,
+  emits: ['load'],
   setup: (props, ctx) => {
     const $img = useImage()
     const _base = useBaseImage(props)
@@ -69,6 +70,14 @@ export default defineComponent({
       }
     }
 
+    const imgEl = ref<HTMLImageElement>()
+
+    onMounted(() => {
+      imgEl.value!.onload = (event) => {
+        ctx.emit('load', event)
+      }
+    })
+
     return () => h('picture', { key: nSources.value[0].src }, [
       ...(nSources.value?.[1]
         ? [h('source', {
@@ -78,6 +87,7 @@ export default defineComponent({
           })]
         : []),
       h('img', {
+        ref: imgEl,
         ..._base.attrs.value,
         ...imgAttrs,
         src: nSources.value[0].src,