feat(nuxt): lazyLoad prop for data saving mode etc.

johannschopplich · johannschopplich · commit 4e03c625a4f2 · 2023-04-25T14:12:12.000+02:00
diff --git a/packages/core/src/lazyLoad.ts b/packages/core/src/lazyLoad.ts
@@ -18,7 +18,6 @@ export function lazyLoad<T extends HTMLImageElement>(
     hash = true,
     hashType = 'blurhash',
     placeholderSize = DEFAULT_PLACEHOLDER_SIZE,
-    immediate = false,
     onImageLoad,
   }: UnLazyLoadOptions = {},
 ) {
@@ -28,27 +27,16 @@ export function lazyLoad<T extends HTMLImageElement>(
     // Calculate the image's `sizes` attribute if `data-sizes="auto"` is set
     updateSizesAttribute(image)
 
-    // Load the image right away if `immediate` is set to `true`
-    if (immediate) {
-      updatePictureSources(image)
-      updateImageSrcset(image)
-      updateImageSrc(image)
-      continue
-    }
-
     // Generate the blurry placeholder from a Blurhash or ThumbHash string if applicable
     if (__ENABLE_HASH_DECODING__ && hash) {
-      const { blurhash, thumbhash } = image.dataset
-      const hasOptsHash = typeof hash === 'string'
-      const _hash = hasOptsHash ? hash : (thumbhash || blurhash)
-
-      if (_hash) {
-        applyPlaceholder(image, {
-          hash: _hash,
-          type: hasOptsHash ? hashType : thumbhash ? 'thumbhash' : 'blurhash',
-          size: placeholderSize,
-        })
-      }
+      const placeholoder = createPlaceholderFromHash({
+        image,
+        hash: typeof hash === 'string' ? hash : undefined,
+        hashType,
+        placeholderSize,
+      })
+      if (placeholoder)
+        image.src = placeholoder
     }
 
     // Bail if the image doesn't provide a `data-src` or `data-srcset` attribute
@@ -101,9 +89,13 @@ export function loadImage(
   onImageLoad?: (image: HTMLImageElement) => void,
 ) {
   const imageLoader = new Image()
-  imageLoader.srcset = image.dataset.srcset!
-  imageLoader.src = image.dataset.src!
-  imageLoader.sizes = image.sizes
+  const { srcset, src, sizes } = image.dataset
+  if (srcset)
+    imageLoader.srcset = srcset
+  if (src)
+    imageLoader.src = src
+  if (sizes)
+    imageLoader.sizes = sizes
 
   imageLoader.addEventListener('load', () => {
     updatePictureSources(image)
@@ -113,6 +105,55 @@ export function loadImage(
   })
 }
 
+export function createPlaceholderFromHash(
+  {
+    /** If given, the hash will be extracted from the image's `data-blurhash` or `data-thumbhash` attribute and ratio will be calculated from the image's actual dimensions */
+    image,
+    hash,
+    hashType = 'blurhash',
+    /** @default 32 */
+    placeholderSize = DEFAULT_PLACEHOLDER_SIZE,
+    /** Will be calculated from the image's actual dimensions if not provided */
+    placeholderRatio,
+  }: {
+    image?: HTMLImageElement
+    hash?: string
+    hashType?: 'blurhash' | 'thumbhash'
+    placeholderSize?: number
+    placeholderRatio?: number
+  } = {},
+) {
+  if (!hash && image) {
+    const { blurhash, thumbhash } = image.dataset
+    hash = thumbhash || blurhash
+    hashType = thumbhash ? 'thumbhash' : 'blurhash'
+  }
+
+  if (!hash)
+    return
+
+  try {
+    if (hashType === 'thumbhash') {
+      return createPngDataUriFromThumbHash(hash)
+    }
+    else {
+      // Preserve the original image's aspect ratio
+      if (!placeholderRatio && image) {
+        const actualWidth = image.width || image.offsetWidth || placeholderSize
+        const actualHeight = image.height || image.offsetHeight || placeholderSize
+        placeholderRatio = actualWidth / actualHeight
+      }
+      return createPngDataUriFromBlurHash(hash, {
+        ratio: placeholderRatio,
+        size: placeholderSize,
+      })
+    }
+  }
+  catch (error) {
+    console.error(`Error generating ${hashType} placeholder:`, error)
+  }
+}
+
 function updateSizesAttribute(element: HTMLImageElement | HTMLSourceElement) {
   const { sizes } = element.dataset
   if (sizes !== 'auto')
@@ -148,33 +189,3 @@ function updatePictureSources(image: HTMLImageElement) {
     [...picture.querySelectorAll<HTMLSourceElement>('source[data-src]')].forEach(updateImageSrc)
   }
 }
-
-function applyPlaceholder(
-  image: HTMLImageElement,
-  { hash, type, size }: {
-    hash: string
-    type: 'blurhash' | 'thumbhash'
-    size: number
-  },
-) {
-  try {
-    // Generate the blurry placeholder for either a ThumbHash or a BlurHash string
-    let placeholder: string
-
-    if (type === 'thumbhash') {
-      placeholder = createPngDataUriFromThumbHash(hash)
-    }
-    else {
-      // Preserve the original image's aspect ratio
-      const actualWidth = image.width || image.offsetWidth || size
-      const actualHeight = image.height || image.offsetHeight || size
-      const ratio = actualWidth / actualHeight
-      placeholder = createPngDataUriFromBlurHash(hash, { ratio, size })
-    }
-
-    image.src = placeholder
-  }
-  catch (error) {
-    console.error(`Error generating ${type} placeholder:`, error)
-  }
-}
diff --git a/packages/nuxt/playground/app.vue b/packages/nuxt/playground/app.vue
@@ -1,10 +1,18 @@
 <script setup lang="ts">
 import { PlaygroundDivider, UnLazyImage } from '#components'
+import { ref } from '#imports'
 import '@unocss/reset/tailwind.css'
 
 const blurhash = 'LKO2:N%2Tw=w]~RBVZRi};RPxuwH'
 const thumbhash = '1QcSHQRnh493V4dIh4eXh1h4kJUI'
 const logoUrl = new URL('../../../docs/public/logo.svg', import.meta.url).href
+
+const shouldLoadImage = ref(false)
+
+function loadImage() {
+  console.log('load image')
+  shouldLoadImage.value = true
+}
 </script>
 
 <template>
@@ -13,59 +21,81 @@ const logoUrl = new URL('../../../docs/public/logo.svg', import.meta.url).href
     <Link rel="icon" :href="logoUrl" type="image/svg+xml" />
   </Head>
 
-  <main class="mx-auto max-w-xl px-4 py-12 sm:px-6 lg:px-8">
-    <div class="space-y-6">
-      <div class="space-y-2">
-        <PlaygroundDivider>SSR-decoded BlurHash as <strong>PNG</strong> data URI</PlaygroundDivider>
-        <p class="text-sm text-gray-500">
-          The image below is inlined as a PNG data URI.
-        </p>
-        <UnLazyImage
-          :blurhash="blurhash"
-          :blurhash-ratio="2"
-          data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
-          width="640"
-          height="320"
-        />
+  <main class="mx-auto max-w-prose px-4 py-12 sm:px-6 lg:px-8">
+    <div class="space-y-12">
+      <div class="grid grid-cols-2 gap-6">
+        <div class="space-y-2">
+          <PlaygroundDivider><strong>SSR</strong>-decoded BlurHash</PlaygroundDivider>
+          <UnLazyImage
+            :blurhash="blurhash"
+            :blurhash-ratio="2"
+            data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
+            width="640"
+            height="320"
+          />
+          <p class="text-sm text-gray-500">
+            The image above is inlined as a PNG data URI.
+          </p>
+        </div>
+        <div class="space-y-2">
+          <PlaygroundDivider><strong>Client-side</strong> decoded BlurHash</PlaygroundDivider>
+          <UnLazyImage
+            :ssr="false"
+            :blurhash="blurhash"
+            :blurhash-ratio="2"
+            data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
+            width="640"
+            height="320"
+          />
+          <p class="text-sm text-gray-500">
+            The client-side decoded BlurHash will infer the image dimensions from the <code>width</code> and <code>height</code> attributes.
+          </p>
+        </div>
       </div>
 
-      <div class="space-y-2">
-        <PlaygroundDivider>Client-side decoded BlurHash</PlaygroundDivider>
-        <p class="text-sm text-gray-500">
-          The client-side decoded BlurHash will infer the image dimensions from the <code>width</code> and <code>height</code> attributes.
-        </p>
-        <UnLazyImage
-          :ssr="false"
-          :blurhash="blurhash"
-          :blurhash-ratio="2"
-          data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
-          width="640"
-          height="320"
-        />
-      </div>
+      <div class="grid grid-cols-2 gap-6">
+        <div class="space-y-2">
+          <PlaygroundDivider><strong>SSR</strong>-decoded ThumbHash</PlaygroundDivider>
+          <UnLazyImage
+            :thumbhash="thumbhash"
+            data-src="/images/sunrise-evan-wallace.jpg"
+            width="480"
+            height="640"
+            style="aspect-ratio: 3/4;"
+          />
+          <p class="text-sm text-gray-500">
+            The image above is inlined as a PNG data URI.
+          </p>
+        </div>
 
-      <div class="space-y-2">
-        <PlaygroundDivider>SSR-decoded ThumbHash as <strong>PNG</strong> data URI</PlaygroundDivider>
-        <p class="text-sm text-gray-500">
-          The image below is inlined as a PNG data URI.
-        </p>
-        <UnLazyImage
-          :thumbhash="thumbhash"
-          data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
-          width="480"
-          height="640"
-        />
+        <div class="space-y-2">
+          <PlaygroundDivider><strong>Client-side</strong> decoded ThumbHash</PlaygroundDivider>
+          <UnLazyImage
+            :ssr="false"
+            :thumbhash="thumbhash"
+            data-src="/images/sunrise-evan-wallace.jpg"
+            width="480"
+            height="640"
+            style="aspect-ratio: 3/4;"
+          />
+        </div>
       </div>
 
-      <div class="space-y-2">
-        <PlaygroundDivider>Client-side decoded ThumbHash</PlaygroundDivider>
-        <UnLazyImage
-          :ssr="false"
-          :thumbhash="thumbhash"
-          data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
-          width="480"
-          height="640"
-        />
+      <div class="grid grid-cols-2 gap-6">
+        <div class="space-y-2">
+          <PlaygroundDivider>Lazy load on click</PlaygroundDivider>
+          <UnLazyImage
+            thumbhash="HBkSHYSIeHiPiHh8eJd4eTN0EEQG"
+            :lazy-load="shouldLoadImage"
+            data-src="/images/fall-evan-wallace.jpg"
+            width="480"
+            height="640"
+            @click="loadImage"
+          />
+          <p class="text-sm text-gray-500">
+            Lazy loading will only be triggered when the image is clicked.
+          </p>
+        </div>
       </div>
     </div>
   </main>
diff --git a/packages/nuxt/playground/public/images/fall-evan-wallace.jpg b/packages/nuxt/playground/public/images/fall-evan-wallace.jpg
diff --git a/packages/nuxt/playground/public/images/sunrise-evan-wallace.jpg b/packages/nuxt/playground/public/images/sunrise-evan-wallace.jpg
diff --git a/packages/nuxt/src/runtime/components/UnLazyImage.vue b/packages/nuxt/src/runtime/components/UnLazyImage.vue
@@ -22,10 +22,10 @@ const props = withDefaults(
     /** Aspect ratio (width / height) of the decoded BlurHash image. Only applies to SSR-decoded placeholder images from a BlurHash string. */
     placeholderRatio?: number
     /**
-     * A flag to indicate whether the image should be loaded immediately.
-     * @default false
+     * A flag to indicate whether the image should be lazy-loaded (default) or deferred until this prop is set to `true`. Note: Placeholder images from hashes will still be decoded.
+     * @default true
      */
-    immediate?: boolean
+    lazyLoad?: boolean
     /** Whether the ThumbHash or BlurHash should be decoded on the server. Overrides the global module configuration if set. */
     ssr?: boolean
   }>(),
@@ -36,20 +36,19 @@ const props = withDefaults(
     thumbhash: undefined,
     placeholderSize: undefined,
     placeholderRatio: undefined,
-    immediate: false,
+    lazyLoad: true,
     ssr: undefined,
   },
 )
 
 const { unlazy } = useRuntimeConfig().public
 const target = ref<HTMLImageElement | undefined>()
 let cleanup: () => void | undefined
+// const now = performance.now()
 
 // SSR-decoded BlurHash as PNG data URI placeholder image
-const isSSR = process.server && (props.ssr ?? unlazy.ssr)
-
-// const now = performance.now()
-const pngPlaceholder = (isSSR && (props.thumbhash || props.blurhash))
+const loadSSR = process.server && (props.ssr ?? unlazy.ssr)
+const pngPlaceholder = (loadSSR && (props.thumbhash || props.blurhash))
   ? props.blurhash
     ? createPngDataUriFromBlurHash(props.blurhash, {
       size: props.placeholderSize || unlazy.placeholderSize,
@@ -58,21 +57,23 @@ const pngPlaceholder = (isSSR && (props.thumbhash || props.blurhash))
     : createPngDataUriFromThumbHash(props.thumbhash!)
   : undefined
 
-// if (isSSR && process.dev)
+// if (loadSSR && process.dev)
 //   console.log(`[unlazy] BlurHash decoded in ${performance.now() - now}ms`)
 
 onMounted(() => {
+  if (!target.value)
+    return
+
   watchEffect(() => {
     cleanup?.()
 
-    if (!target.value)
+    if (!props.lazyLoad)
       return
 
     cleanup = lazyLoad(target.value, {
       hash: props.thumbhash || props.blurhash,
       hashType: props.thumbhash ? 'thumbhash' : 'blurhash',
       placeholderSize: props.placeholderSize || unlazy.placeholderSize,
-      immediate: props.immediate,
     })
   })
 })
diff --git a/packages/unlazy/src/index.ts b/packages/unlazy/src/index.ts
@@ -1,2 +1,2 @@
-export { autoSizes, isCrawler, isLazyLoadingSupported, lazyLoad, loadImage } from '@unlazy/core'
+export { autoSizes, createPlaceholderFromHash, isCrawler, isLazyLoadingSupported, lazyLoad, loadImage } from '@unlazy/core'
 export type { UnLazyLoadOptions } from '@unlazy/core'

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-export { autoSizes, isCrawler, isLazyLoadingSupported, lazyLoad, loadImage } from '@unlazy/core'`
	`1`	`+export { autoSizes, createPlaceholderFromHash, isCrawler, isLazyLoadingSupported, lazyLoad, loadImage } from '@unlazy/core'`
`2`	`2`	`export type { UnLazyLoadOptions } from '@unlazy/core'`