Question

我的dev site使用了大量的Skrollr动画，分辨率为1024px及以上。在1024px下，我不想要动画显示，所以我隐藏了所有的图像和诸如此类的东西。

然而，调用动画制作的javascript仍会在较小的分辨率上调用并导致一些问题。

有没有办法基本上说＆＃34;如果分辨率低于1024px，请忽略这些JS文件＆＃34;？

我尝试将它们放入DIV并使用我现有的CSS媒体查询到＆＃34; display：none＆＃34; DIV在较小的分辨率上，但是不起作用。

仅供参考，这些是被调用的文件：

> cabal install helium lvmrun

Answer 1

最简单的方法是使用jQuery ..

$(window).width();

普通Javascript：

var w = window.innerWidth;
var ow = window.outerWidth; //toolbars and status, etc...

if(w > 1024) {
   //Skrollr
}

从那里获得一个小if来触发 Skrollr 事件

Answer 2

在http://workwave.joomlatest01.mms-dev.com//js/homepageanimation.js中的jQuery(function($) {之上添加类似

的内容

jQuery(function($) {
    if(screen.width < 1024) {
        return;
    }
    // skrollr stuff....
}

所以所有的skrollr函数都不会在宽度低于1024px的屏幕尺寸上调用。

Answer 3

我建议有条件地加载脚本。基本上，如果屏幕大小大于1024，则仅加载脚本。

if(window.innerWidth >= 1024){
    var file = document.createElement('script')
    file.setAttribute("type","text/javascript")
    file.setAttribute("src", "/js/skrollr.min.js")
}

Answer 4

这里一个很好的方法是只调用在给定屏幕尺寸下启动Skrollr功能的函数。一个真正快速的谷歌表明，Skrollr有一个.init（）函数可以让事情变得更好。如果没有看到JS如何设置，很难给出任何可靠的建议，但这是一个想法：

您有一个页面/网站的JS文件，其中包含一个条件，用于在文档准备好之后初始化插件之前检查窗口的宽度。

$(document).ready(function() {
 if ($(window).width() > 1023) {
  skrollr.init();
 }
});

jQuery也使这更容易，所以值得利用它。

Answer 5

考虑而不是通过窗口宽度（有时可能与不同浏览器之间的CSS宽度不一致）的另一个选择是测试CSS规则以及它是否为真，所以使用一个你知道在一个大小超过1024px，这将消除任何不一致。

在这种情况下链接JQuery文件，如其他答案中所示。

如何在较小的分辨率上忽略javascript？

5 个答案: