防止在移动浏览器中使用<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实现图像。 使图像中与普通的股利再使用如下代码位于这里的一个： What does @media screen and (max-width: 1024px) mean in CSS?