在移动设备上隐藏<img/>的最佳方法是什么？

Question

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

Answer 1

另一种方法可能是在您弄清楚设备是什么之前不要向src属性添加值。使用标识设备的类加载元素：

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

然后，一旦您确定了设备，请将每个受影响图片的数据属性中的网址添加到src：

var images = document.querySelectorAll('img.desktop');

for (let i = 0; i < images.length; i++) {
  images[i].src = images[i].dataset.src;
}

DEMO

Answer 2

一种方法是将图像用作DIV中的背景图像，并且仅使用移动优先方法在较大屏幕上包含媒体查询。