隐藏<img>在移动设备上

What is the best method to hide <img> on mobile devices?

本文关键字：移动 gt lt img 隐藏      更新时间：2023-09-26

在我的html中，我有四个img标签，我想将它们隐藏在移动设备上，我正在寻找最好的方法来做到这一点，而无需在移动设备中下载它们。我发现在CSS中使用display:none并不能阻止浏览器下载图像，而且我知道如何使用srcset属性来基于媒体查询进行源混洗，但我不知道是否可以使用它来隐藏基于媒体查询的内容
有人知道如何正确地做吗？

另一种方法可能是，在弄清楚设备是什么之前，不要向src属性添加值

<img class="desktop" data-src="http://dummyimage.com/200x200/000/fff" />

然后，一旦您识别了设备，就将数据属性中的URL添加到每个受影响图像的src中：

var images = document.querySelectorAll('img.desktop');
for (let i = 0; i < images.length; i++) {
  images[i].src = images[i].dataset.src;
}

演示

一种方法是将图像用作div中的背景图像，并使用移动优先的方法仅包括那些在较大屏幕上具有媒体查询的图像。

相关文章：