防止使用元素在移动浏览器中加载标题背景图像<picture>

Question

有没有办法在使用手机时使用<picture>元素来阻止页面下载图像？

我有一个显示标题图像的网站。 由于网站功能，无法使用CSS(背景图片+媒体查询(来防止标题图片加载到移动设备上。 因此，我需要使用利用<img>或<picture>元素的解决方案。

我在想也许我可以使用 <picture> 元素在移动设备上加载小而清晰的图像(例如 1 像素图像(，然后在较大的屏幕上加载完整的背景图像。

<picture>
  <source srcset="./images/clear-1pixel.png">
  <source srcset="./images/banner.jpg" media="(min-width: 1000px)">
  <img src="./images/banner.jpg" alt="Header background">
</picture>

这是最好的方法吗？ 我尝试对其进行测试，但似乎移动浏览器仍在加载两个图像。

Answer 1

最好的选择可能是使用 CSS 实现图像。在图像位置创建一个通用div，然后使用代码，例如位于此处的代码：@media屏幕和(最大宽度：1024px(在CSS中是什么意思？