jquery - 防止在响应式网页设计中加载幻灯片的图像

Question

我在我们的网站上有一个幻灯片 jquery 插件。我正在努力使我的网站具有响应性。我不想在移动分辨率上显示幻灯片。但是它可以使用 隐藏display:none，但它会导致在移动设备上下载额外的无用信息。

有没有办法防止在手机上加载幻灯片图像？

Answer 1

这可以通过使用媒体查询并包含背景图片来完成

例如，如果您包含图像

@media (min-width: 768px) and (max-width: 979px) { 
  // css here only applied when min-width: 768px  and  max-width: 979px    

 }

Answer 2

使用 JavaScript 怎么样？

像往常一样包含 jQuery 幻灯片插件，但要防止它（无论如何）自动启动。然后编写一个简单if的，它将检查window对象以查看当前视口（用户）尺寸。如果他们落入让我们称之为“移动范围”（就像在媒体查询中一样），那么根本不启动幻灯片。

如果幻灯片插件编写正确，它应该支持手动、非自动启动幻灯片，并且在幻灯片实际开始之前它不应该请求任何图像（从而限制带宽）。如果您的不支持这些，请考虑更改插件。周围有数百甚至数千个这样的插件。