fix(core): skip preloading images from <picture> tags

Author: johannschopplich

packages/core/src/lazyLoad.ts

@@ -101,6 +101,17 @@ export function loadImage(
   image: HTMLImageElement,
   onImageLoad?: (image: HTMLImageElement) => void,
 ) {
+  const isChildOfPictureElement = image.parentElement?.tagName.toLowerCase() === 'picture'
+
+  // Skip preloading its `data-src` or `data-srcset` to avoid unnecessary requests
+  if (isChildOfPictureElement) {
+    updatePictureSources(image)
+    updateImageSrcset(image)
+    updateImageSrc(image)
+    onImageLoad?.(image)
+    return
+  }
+
   const imagePreLoader = new Image()
   const { srcset, src, sizes } = image.dataset
 
@@ -114,9 +125,6 @@ export function loadImage(
     imagePreLoader.sizes = image.sizes
   }
 
-  // Update sources to prevent duplicate downloads
-  updatePictureSources(image)
-
   if (srcset)
     imagePreLoader.srcset = srcset
   if (src)