feat: update sizes attribute on image resize with new value (#15)

* Add automatic recalculation of "sizes" attribute when element-width changes on resize

* Add debounce effect to resize call

* refactor: update the debounce function according to johannschopplich suggestion

* refactor: refactor resizeElementStore from array to set

Co-authored-by: Johann Schopplich <mail@johannschopplich.com>

* fix: add resize observer to clean-up functions, to avoid dangling observer instances

* fix: only register resize observer on <img> elements,
since <source> tags have no dimensions and cant be resized

* feat: add global `updateSizesOnResize` option

---------

Co-authored-by: Johann Schopplich <mail@johannschopplich.com>

Author: felixranesberger

docs/api/lazy-load.md

@@ -62,6 +62,13 @@ interface UnLazyLoadOptions {
    */
   placeholderSize?: number
 
+  /**
+   * Whether to update the `sizes` attribute on resize events with the current image width.
+   *
+   * @default false
+   */
+  updateSizesOnResize?: boolean
+
   /**
    * A callback function to run when an image is loaded.
    */

packages/core/src/lazyLoad.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_PLACEHOLDER_SIZE } from './constants'
-import { isCrawler, isLazyLoadingSupported, toElementArray } from './utils'
+import { debounce, isCrawler, isLazyLoadingSupported, toElementArray } from './utils'
 import { createPngDataUri as createPngDataUriFromThumbHash } from './thumbhash'
 import { createPngDataUri as createPngDataUriFromBlurHash } from './blurhash'
 import type { UnLazyLoadOptions } from './types'
@@ -18,18 +18,24 @@ export function lazyLoad<T extends HTMLImageElement>(
     hash = true,
     hashType = 'blurhash',
     placeholderSize = DEFAULT_PLACEHOLDER_SIZE,
+    updateSizesOnResize = false,
     onImageLoad,
   }: UnLazyLoadOptions = {},
 ) {
   const cleanupFns = new Set<() => void>()
 
   for (const image of toElementArray<T>(selectorsOrElements)) {
     // Calculate the image's `sizes` attribute if `data-sizes="auto"` is set
-    updateSizesAttribute(image)
+    cleanupFns.add(
+      updateSizesAttribute(image, updateSizesOnResize),
+    )
 
     // Calculate the `sizes` attribute for sources inside a `<picture>` element
-    if (image.parentElement?.tagName.toLowerCase() === 'picture')
-      [...image.parentElement.getElementsByTagName('source')].forEach(updateSizesAttribute)
+    if (image.parentElement?.tagName.toLowerCase() === 'picture') {
+      [...image.parentElement.getElementsByTagName('source')].forEach(
+        sourceTag => updateSizesAttribute(sourceTag),
+      )
+    }
 
     // Generate the blurry placeholder from a Blurhash or ThumbHash string if applicable
     if (__ENABLE_HASH_DECODING__ && hash) {
@@ -157,17 +163,39 @@ export function createPlaceholderFromHash(
   }
 }
 
-function updateSizesAttribute(element: HTMLImageElement | HTMLSourceElement) {
+// Keep track of elements that have a `data-sizes="auto"` attribute
+// and need to be updated when their size changes
+const resizeElementStore = new WeakMap<HTMLImageElement | HTMLSourceElement, ResizeObserver>()
+
+function updateSizesAttribute(element: HTMLImageElement | HTMLSourceElement, shouldUpdateOnResize = false) {
+  const removeResizeObserver = (): void => {
+    const observerInstance = resizeElementStore.get(element)
+    if (!observerInstance)
+      return
+
+    observerInstance.disconnect()
+    resizeElementStore.delete(element)
+  }
+
   const { sizes } = element.dataset
   if (sizes !== 'auto')
-    return
+    return removeResizeObserver
 
   const width = element instanceof HTMLSourceElement
     ? element.parentElement?.getElementsByTagName('img')[0]?.offsetWidth
     : element.offsetWidth
 
   if (width)
     element.sizes = `${width}px`
+
+  if (shouldUpdateOnResize && !resizeElementStore.has(element)) {
+    const debounceResize = debounce(() => updateSizesAttribute(element), 500)
+    const observerInstance = new ResizeObserver(debounceResize)
+    resizeElementStore.set(element, observerInstance)
+    observerInstance.observe(element)
+  }
+
+  return removeResizeObserver
 }
 
 function updateImageSrc(image: HTMLImageElement | HTMLSourceElement) {

packages/core/src/types.ts

@@ -35,6 +35,13 @@ export interface UnLazyLoadOptions {
    */
   placeholderSize?: number
 
+  /**
+   * Whether to update the `sizes` attribute on resize events with the current image width.
+   *
+   * @default false
+   */
+  updateSizesOnResize?: boolean
+
   /**
    * A callback function to run when an image is loaded.
    */

packages/core/src/utils/index.ts

@@ -41,3 +41,20 @@ export function base64ToBytes(value: string) {
 
   return new Uint8Array(decodedData)
 }
+
+export function debounce<T extends (...args: any[]) => void>(
+  fn: T,
+  delay: number,
+) {
+  let timeout: ReturnType<typeof setTimeout> | undefined
+
+  return function (...args: Parameters<T>) {
+    if (timeout)
+      clearTimeout(timeout)
+
+    timeout = setTimeout(() => {
+      timeout = undefined
+      fn(...args)
+    }, delay)
+  }
+}