Javascript 几种设备的图像响应能力？

这是我的html代码：

<picture>
<source srcset="480_smaller_landscape.jpg" media="(max-width: 480px) and (orientation: landscape)">
<source srcset="776_smaller_portrait.jpg" media="(max-width: 776px) and (orientation: portrait)">
<source srcset="1080_default_landscape.jpg" media="(min-width: 1080px) and (orientation: landscape)">
<source srcset="1926_default_portrait.jpg" media="(min-width: 1926px) and (orientation: portrait)">
<img srcset="default_landscape.jpg" alt="My default image">
</picture>

我的问题是: 如果我将此代码用于多台设备的图像响应

它一次发出多少请求？对于所有图像或仅针对特定设备所需的图像…？

示例：如果我为平板电脑（776px）加载此图像页面，则只会加载“776_较小的_肖像.jpg”

或

所有图像将立即加载，但仅显示“776_较小的_肖像.jpg”

我想做的是：

我想显示一个特定设备的特定图像，图像将像

<img srcset="file_path/device_resulation_image_name.jpg" alt="My default image">

---

加载页面时，只需打开开发人员工具并在“网络”选项卡上进行设置，就可以轻松测试此功能

---

加载页面时，只需打开开发人员工具并在“网络”选项卡上进行设置，就可以轻松测试此功能

谢谢。当我使用此“图片”标记时，所有源将一次加载..或相应设备的特定图像..？@Masud001您是否阅读了我的答案并查看了我在其中发布的图像？我已经阅读了..但我想在html中使用的所有图像都不是背景图像..@Masud001再次阅读答案。很明显，您当前的代码只会导致下载符合设备大小的单个图像。最后一部分不是为页面建议背景图像，而是为前景中的元素建议背景图像。它使该元素起到画框的作用，非常常见。谢谢。当我使用此“图片”标记时，所有源将一次加载..或相应设备的特定图像..？@Masud001您是否阅读了我的答案并查看了我在其中发布的图像？我已经阅读了..但我想在html中使用的所有图像都不是背景图像..@Masud001再次阅读答案。很明显，您当前的代码只会导致下载符合设备大小的单个图像。最后一部分不是为页面建议背景图像，而是为前景中的元素建议背景图像。它使该元素起到画框的作用，非常常见。