feat(vue): add preload prop

Author: johannschopplich

docs/integrations/vue.md

@@ -66,6 +66,7 @@ The `UnLazyImage` component accepts the following props:
 | `thumbhash` | String | A ThumbHash string representing the blurry placeholder image. |
 | `placeholderSrc` | String | Optional image source URL for a custom placeholder image. Will be ignored if a BlurHash or ThumbHash is provided. |
 | `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. |
 
 ## Examples
 
@@ -96,3 +97,17 @@ The `UnLazyImage` component accepts the following props:
 ::: tip
 In each example, the `sizes` attribute is automatically calculated given the `auto-sizes` prop.
 :::
+
+### Preload Image
+
+Useful if the `UnLazyImage` is part of e.g. a slider, and you want to preload the next image.
+
+```vue
+<template>
+  <UnLazyImage
+    :blurhash="blurhash"
+    src-set="image-320w.jpg 320w, image-640w.jpg 640w"
+    auto-sizes
+    preload
+  />
+</template>

packages/vue/src/components/UnLazyImage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onBeforeUnmount, ref, watchEffect } from 'vue'
-import { lazyLoad } from 'unlazy'
+import { lazyLoad, loadImage } from 'unlazy'
 import type { ImgHTMLAttributes } from 'vue'
 
 const props = defineProps<{
@@ -21,6 +21,11 @@ const props = defineProps<{
   placeholderSrc?: string
   /** 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. */
   placeholderSize?: number
+  /**
+   * A flag to indicate whether the image should be preloaded, even if it's not in the viewport yet.
+   * @default false
+   */
+  preload?: boolean
 }>()
 
 const target = ref<HTMLImageElement | undefined>()
@@ -32,6 +37,11 @@ watchEffect(() => {
   if (!target.value)
     return
 
+  if (props.preload) {
+    loadImage(target.value)
+    return
+  }
+
   cleanup = lazyLoad(target.value, {
     hash: props.thumbhash || props.blurhash,
     hashType: props.thumbhash ? 'thumbhash' : 'blurhash',