预加载<picture>元素加载两个图像

Question

我有一个

<picture>

元素，具有多个设备宽度的多个源，并尝试组装正确的

<link rel="preload">

元素来预加载适合为

<picture>

定义的媒体查询的单个图像。由于某种原因，我的代码导致浏览器在查看 Chrome devtool 的“网络”选项卡时加载两个图像。

我在这里误解了什么？

<link rel="preload" as="image" imagesrcset="/big.webp 885w, /mobile.webp 420w, /fallback.jpg 885w" imagesizes="(min-width: 421px) 885px, (max-width: 420px) 420px">

<picture>
    <source srcset="/big.webp" type="image/webp" media="(min-width: 421px)">
    <source srcset="/mobile.webp" type="image/webp" media="(max-width: 420px)">
    <img src="/fallback.jpg" fetchpriority="high" width="885" height="570" class="img-fluid" alt="example">
</picture>

加载的两张图片是

/big.webp

和

/mobile.webp

<link rel="preload" as="image" imagesrcset="https://via.placeholder.com/1200x800 885w, https://via.placeholder.com/1200x800/ff0000 420w, https://via.placeholder.com/1200x800/00ff00 885w" imagesizes="(min-width: 421px) 885px, (max-width: 420px) 420px">

<picture>
  <source srcset="https://via.placeholder.com/1200x800" type="image/webp" media="(min-width: 421px)">
  <source srcset="https://via.placeholder.com/1200x800/ff0000" type="image/webp" media="(max-width: 420px)">
  <img src="https://via.placeholder.com/1200x800/00ff00" fetchpriority="high" width="885" height="570" class="img-fluid" alt="example">
</picture>

Answer 1

我只能通过设置两个单独的

<link rel="preload">

元素以及各自的

media

属性来找到部分解决方案，如下所示：

<link rel="preload" as="image" imagesrcset="/big.webp"
imagesizes="885px" media="(min-width: 421px)">


<link rel="preload" as="image" imagesrcset="mobile.webp"
imagesizes="420px" media="(max-width: 420px)">

这样，只会下载其中一张图像。唯一的问题是

fallback.jpg

图像，因为它与

big.webp

具有相同的大小规则，因此不能像上面的其他图像一样定义（两个具有相同大小的图像都会被下载）。我暂时只能接受这个解决方案，除非有人想出一种方法将所有三个图像包含在预加载中。