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

Posted 2023-03-06

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

【英文标题】：Prevent header background image loading in mobile browser using <picture> element

【发布时间】：2016-05-23 02:14:10

【问题描述】：

有没有办法在使用手机时使用<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" >
</picture>

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

【参考方案1】：

您最好的选择可能是使用 CSS 实现图像。 在图像位置创建一个通用 div，然后使用位于此处的代码： What does @media screen and (max-width: 1024px) mean in CSS?

【讨论】：

不幸的是，正如我在原帖中提到的，CSS 和媒体查询不是一个选项。