loading respond.js async via modernizr.load is slow?

StackOverflow https://stackoverflow.com/questions/10064079

Domanda

I am using the Modernizr.load() method to test, whether the browser (ie) understands media queries or not, and if not I load the respond.js libary.

however, I see that loading the respond.js via the modernizr.load method gets me a FOUC, where the inline script method doesn't.

modernizr.load method:

<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>

inline method:

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

why is that so? shouldn't be the async method faster? or is the inline method better, because the script is blocking the DOM and waiting until the script is loaded...?

È stato utile?

Soluzione

It depends how much you care about the FOUC. The advantage to the async method is that it's non-blocking. I would switch it around so that Respond is first so that you don't have to wait for jQuery to be parsed. That'd probably solve the FOUC. Call Modernizr.load in your <head> (see here) like this:

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');
    }
}]);

Your IE conditional is great solution too—arguably better. If you do that, then just put it before jQuery and you'll be fine:

<!--[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');
    }
}]);
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top