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

Question

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

无论如何都要阻止在手机上加载幻灯片图片？

Answer 1

这可以通过使用media query并包含背景图片

来完成

例如，如果您包含图片

@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对象以查看当前视口（用户）维度。如果它们落入我们称之为“移动范围”（就像在媒体查询中那样），那么就不要开始幻灯片放映。

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