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

Question

我的 dev site 在 1024 像素及更高分辨率下使用大量 Skrollr 动画。在1024px以下，我不想显示动画，所以我隐藏了所有图像等等。

但是，为使动画工作而被调用的 javascript 仍然会在较小的分辨率下被调用并导致一些问题。

有没有办法基本上说"If the resolution is less than 1024px, ignore these JS files"？

我尝试将它们放在 DIV 中并使用我现有的 CSS 媒体查询 "display: none" DIV 较小的分辨率，但这不起作用。

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

<script type="text/javascript" src="/js/skrollr.min.js"></script>
<script type="text/javascript" src="/js/homepageanimation.js"></script>

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

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

您有一个 page/site 的 JS 文件，其中包含在文档准备好后初始化插件之前检查 window 宽度的条件。

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

jQuery 也使这变得容易得多，因此值得利用它。

Answer 4

我建议有条件地加载脚本。基本上只有屏幕尺寸大于 1024 时才会加载脚本。

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

Answer 5

另一个要考虑的选项，而不是通过 window 宽度（有时可能与不同浏览器中的 CSS 宽度不一致）是针对 CSS 规则进行测试，以及是否这是真的，所以使用一个你知道在 1024px 以上的大小是正确的，这将消除任何不一致。

在此条件下 link JQuery 文件，如其他答案中所示。

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

How to ignore javascript on smaller resolutions?

javascript

css

skrollr