通过modernizr.load加载respond.js异步很慢?

时间:2012-04-08 15:44:25

标签: jquery asynchronous modernizr respond.js

我正在使用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并等待脚本加载...?

1 个答案:

答案 0 :(得分:1)

这取决于你对FOUC的关注程度。异步方法的优点是它是非阻塞的。我会切换它,以便响应是第一个,这样你就不必等待jQuery被解析。这可能解决了FOUC。在Modernizr.loadsee here)中拨打<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');
    }
}]);