javascript - 根据屏幕尺寸使用jquery删除rel属性？

Question

我正在使用灯箱来显示 3 个独立页面上的一组图像。我刚刚使网站响应移动设备，但需要禁用移动设备上的灯箱。我相信最好的方法是删除较小屏幕的 rel 属性。

rel 属性为:rel="lightbox[page-name]"，这些属性位于无序列表内的 anchor 中，其中包含 Brandingsamples、marketingsamples 和 webdesignsamples 类。

我不知道从哪里开始，所以感谢任何帮助。

Answer 1

我宁愿仅在您的页面未在移动上下文中查看时才执行灯箱脚本(并加载所有必要的资源)，而不是删除该属性。这将使您节省宝贵的带宽并使页面加载速度更快。

您可以使用像 yepnope 这样的轻型脚本/ Assets 加载器，仅在满足给定条件时才加载灯箱 Assets (例如，您可以查看屏幕分辨率或屏幕 dpi 值)

一个简单的例子是

<script src="/assets/yepnope.min.js"></script>
<script>
    yepnope([{
       test: (screen.width > 1024),  // if we're on a large screen
       yep: ["/css/lighbox.css", "/assets/lightbox.js"]
    }]);
</script>