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然后使用代码，如位于此处的代码： What does @media screen and (max-width: 1024px) mean in CSS?

使用<picture>元素

1 个答案: