1

当使用<picture>HTML 并且您指定多个源并且每个源具有媒体属性时，浏览器是否会自动同时呈现两个源或仅加载一个源，除非调整屏幕大小？

例如：

<picture>
   <source srcset="/someimage.webp" type="image/webp" media="(min-width:1000px)" >
   <source srcset="/somesmallerimage.webp" type="image/webp" media="(max-width: 999px)" >
   <img src="/someimage.jpg">
</picture>

浏览器会发出 2 个服务器请求，一个用于 /someimage.webp，另一个用于 /somesmallerimage.webp？或者它会根据屏幕大小只发出 1 个服务器请求？如果是后者，在调整屏幕大小时，服务器是否会再次发出请求？如果是前者，有没有办法将一个<picture>元素延迟加载到 DOM 中以避免多个服务器请求？

4

1 回答 1

2

我使用 Chrome 的开发工具作为建议的评论之一，并查看网络选项卡中正在加载的内容。看起来<picture>元素一次只加载 1 个源，根据媒体条件，但是当屏幕调整大小时，它会加载到另一个源中。源彼此独立加载。

于 2021-02-03T13:11:46.267 回答