Home/ Questions/Q 7819407
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T06:56:15+00:00

I am using the Modernizr.load() method to test, whether the browser (ie) understands media

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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