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

【问题标题】：Prevent header background image loading in mobile browser using <picture> element使用 <picture> 元素防止在移动浏览器中加载标题背景图像
【发布时间】：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" alt="Header background">
</picture>

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

【问题讨论】：

标签： html css image

【解决方案1】：

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

【讨论】：

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