使用modernizr有条件地加载javascript答案

【问题标题】：Conditionally load javascript using modernizr使用modernizr有条件地加载javascript
【发布时间】：2015-01-13 09:13:11
【问题描述】：

我正在构建一个视差站点，我想关闭小视口上的视差滚动效果（我想为低于 460px 的视口关闭视差脚本）

我已经使用 Modernizr 完成了一些简单的后备 css 修复，但无法弄清楚如何定位此边界然后加载相关的 js 文件。

我正在使用 scrollr.js 来实现视差效果。

http://prinzhorn.github.io/skrollr/

谢谢你的帮助！！！

【问题讨论】：

标签： javascript jquery media-queries parallax modernizr

【解决方案1】：

老实说，使用真正的 JavaScript 加载器可能更有利，特别是因为 Modernizr 完全是关于 HTML5 和 CSS3 的特征检测，而且我相信它根本不支持 JavaScript。当需要时，它由现已弃用的 YepNope 处理（见下文）。

您的问题的一些潜在脚本是 Require.js、LABjs 或 YepNope[已弃用]。

还有其他几种可能性，例如Head.js，但这基本上是一个完整的工具箱，它具有 Modernizr、jQuery 和其他几个库的功能。但是，对于您想要做的事情，它可能有点过于庞大。还有LazyLoad，它是未维护的，但也应该能够为您提供所需的功能。

进一步阅读：

Quora Answer

ScriptJunkie Article (Same Author as Quora Answer)

【讨论】：

非常感谢@Brandon，回复很有帮助。我浏览了 scrollr 的文档，他们为我的问题提供了开箱即用的解决方案。但是我过去一直在有条件地加载 JavaScript，这些建议看起来很棒，我会做一些你建议的进一步阅读:)
很高兴听到@RyanCampbell :) 我希望这对您将来有很多帮助！

【解决方案2】：

如果您不需要特殊的东西，例如在脚本加载和执行后立即执行顺序执行或回调，这很容易：

function loadJS(u){var r=document.getElementsByTagName("script")[0],s = document.createElement("script");s.src = u;r.parentNode.insertBefore(s,r);}

用法：

if(!Modernizr.feature){
    loadJS('path/to/script.js');
}

如果你使用 jQuery，你可以这样做 + 然后你也有一个回调：

if(!Modernizr.feature){
    $.ajax({
        url: 'path/to/script.js',
        dataType: 'script',
        cache: true,
        global: false,
        crossDomain: true //good for debugging
    });
}

因此，在 90% 的情况下，您不需要特殊的加载脚本。

【讨论】：