如何防止浏览器在移动视口中加载图像

Question

我在网站上有一个在桌面视图中看起来像这样的标题：

但在手机版上，照片设置为显示：无；

但审核显示浏览器仍然加载它！

所以我尝试 display: none; 父亲 div 并且仍然加载，

有没有办法阻止浏览器加载它？

Answer 1

浏览器不知道 CSS，并且在解析 DOM 树时，图像不会在移动设备上显示。

你需要告诉浏览器图像只能使用 dom 元素加载到一定大小。您可以使用sizes 属性告诉浏览器应该以何种尺寸加载图像。

                            the media query   image display size
                                     v             v
<img src="./kitten.jpg" sizes="(min-width: 768px) 700px" />

注意：sizes 属性只是告诉浏览器图像 大小而不是实际调整图像大小。你仍然需要保持 任何与图片相关的 CSS。

Answer 2

您可以将图片用作背景图片。 只有在接受媒体查询时才会加载它，因此对于移动设备，图片不会加载，而对于桌面版本，图片将加载。

这样做的缺点是 Google 不会将您的图片编入索引，例如 Google 图片，但如果您的图片对用户/文本没有好处，那也不错。

---

另一个选择是你使用

<picture>
  <source media="(min-width: 768px)" srcset="your-desktop-picture.jpg">
  <source srcset="your-mobile-picture.jpg">
  <img src="fallback-for-old-browsers.jpg" alt="">
</picture>

你可以用图片来选择不同的图片，你的手机图片也可以是一像素大，但有一张很重要，所以浏览器不会选择桌面图片。

---

总之，我会推荐使用 css 媒体查询的解决方案，因为它更容易，而且您的图片对于文本理解不是必需的。