javascript - 防止移动用户下载桌面轮播图片

Question

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

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

Answer 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 以下，您将看到源更改为小版本。浏览器只会下载图像源的值，因此移动用户永远不会下载大版本。