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

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

Pregunta

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

¿Fue útil?

Solución

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');
    }
}]);
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top