阻止移动用户下载桌面轮播图像答案

【问题标题】：Prevent mobile users from downloading desktop carousel images阻止移动用户下载桌面轮播图像
【发布时间】：2017-02-03 18:02:33
【问题描述】：

我希望静态背景图像在某个（桌面式）断点处成为轮播。我可以阻止移动用户下载这些轮播图像吗？据我所知，媒体查询在这里是不够的。

我不是指用户手动下载图像以保存到他们的设备，我的意思是他们的浏览器会自动下载。

【问题讨论】：

您到底尝试了什么？请附上您的代码。
我有一个背景图片，它在一定的浏览器宽度下变成了轮播。我有一个关于窗口大小的事件侦听器，一旦达到特定宽度，它就会运行轮播函数。据我所知，这不足以阻止用户下载所有图像。
一旦浏览器获得 HTML 源代码，就无法阻止它下载图像。您需要将页面修改为默认没有，然后使用 JS 和 AJAX 下载相应的部分。请记住，DPI 和分辨率都很重要。
@David AJAX。这就说得通了。我想接受这个作为答案，但我不能，因为这是评论。谢谢。
@user3669771 没有理由使用 AJAX。监控浏览器宽度的 JS 代码以及我发布的媒体查询就可以解决问题。

标签： javascript html css

【解决方案1】：

Media Queries将完美解决这个问题。

/* Mobile-first */
element {
   background-image:url("small image here");
}


/* Desktop */
@media screen and (min-width: 1024px) {

  element {
     background-image:url("large image here");
  }
}

如果您使用此代码并让您的浏览器尺寸大于 1024 像素，并使用开发人员工具检查元素，您将看到用作背景源的图像的大版本。如果您随后将浏览器缩小到 1024 以下，您将看到源代码更改为小版本。浏览器只会下载图像源的值，因此移动用户永远不会下载大版本。

【讨论】：

您可能想要添加一段关于如何将其与实际轮播一起使用的段落。例如。每张图片都使用了 ID，等等。
@David 问题不在于如何实现轮播（其中有无数种方式）。 OP 似乎已经开始工作了。
@ScottMarcus 很有趣。我没有意识到这就是所需要的！谢谢。
@user3669771 不客气。不要忘记标记为答案。祝你好运！
是的，但未来经验有限的读者可能不明白如何扩展您所放的内容。如果他们刚刚开始并尝试修改某些东西（很多人都这样做），那么这个答案可能看起来只适用于一张图片。