0

我正在使用 Modernizr.load() 方法来测试浏览器（即）是否理解媒体查询，如果没有，我会加载 respond.js 库。

但是，我看到通过modernizr.load 方法加载respond.js 给我一个FOUC，而内联脚本方法没有。

modernizr.load 方法：

<script>
  Modernizr.load([{
    load: 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
    complete: function () {
      if (!window.jQuery) {
        yepnope('js/libs/jquery.js?v=1.7.2');
      }
    }
  },
  {
    test: Modernizr.mq('only all'),
    nope: 'js/plugins/respond.js?v=v1.1'
  }])
</script>

内联方法：

<!--[if lte IE 8]>
  <script src="js/plugins/respond.js?v=v1.1"></script>
<![endif]-->

为什么呢？不应该是异步方法更快吗？还是内联方法更好，因为脚本阻塞了 DOM 并等待脚本加载...？

4

1 回答 1

1

这取决于您对 FOUC 的关心程度。异步方法的优点是它是非阻塞的。我会切换它，以便首先响应，这样您就不必等待 jQuery 被解析。那可能会解决FOUC。像这样打电话给Modernizr.load你的<head>（见这里）：

Modernizr.load([{
    test: Modernizr.mq('only all'),
    nope: 'js/plugins/respond.js?v=v1.1'
  },{ 
    load: 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
    complete: function () {
        window.jQuery || Modernizr.load('js/libs/jquery.js?v=1.7.2');
    }
}]);

你的 IE 条件也是很好的解决方案——可以说更好。如果你这样做，那么只要把它放在 jQuery 之前就可以了：

<!--[if lt IE 9]> 
    <script src="js/plugins/respond.js?v=v1.1"></script>
<![endif]-->

Modernizr.load([{
    load: 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
    complete: function () {
        window.jQuery || Modernizr.load('js/libs/jquery.js?v=1.7.2');
    }
}]);
于 2012-04-20T19:05:12.067 回答