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が解析されるのを待つ必要がないように、Respondが最初になるように切り替えます。それはおそらく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 に答える