Implementing Older Browser Support for Enquire.js

Previously I touched on the topic of dynamically loading javascript files spurred by a need to load a polyfill for Enquire.js. I have since learned a slightly better way to do this.

To recap a bit: The Enquire.js docs for implementing older browser support with Modernizr are outdated. This is because the last major release of Modernizr ditched their yepnope.js integration (which allowed for a simple way to load external files conditionally).

In my previous article, I showed how to use the jQuery getScript method to load a script in lieu of something like yepnope.js. My experience using this method led me to one issue in particular: When using getScript to load multiple files in sequence, there is a tendency for some of the scripts to occasionally fail to load. It’s not awful but it’s obviously not ideal to have every few page visits fail to load the page properly.

Here’s how I was implementing the polyfill load for Enquire.js with jQuery and Modernizr (with the matchMedia test) loaded:

if (Modernizr.matchmedia){
  
  //modern browser detected
  console.log(‘matchmedia detected’);

  //load enquire and our scripts
  $.getScript(“path/to/enquire.min.js”)

    .done(function() {
      console.log(‘loaded enquire’);
    })

    .fail(function(){
      console.log(‘did not load enquire’);
    });

  $.getScript(“path/to/scripts.min.js”)

    .done(function() {
      console.log(‘loaded addendum’);
    })

    .fail(function(){
      console.log(‘did not load addendum’);
    });

} else {

  //older browser detected
  console.log(‘matchmedia not detected’);

  //load the matchMedia polyfill
  $.getScript(“path/to/match.media.min.js”)

    .done(function() { 
  
      //matchMedia polyfill successfully loaded
      //next load enquire
      $.getScript(“path/to/enquire.min.js”)
        
        .done(function(){
          console.log(‘loaded enquire old ie’);
        });

      //next load our scripts
      $.getScript(“path/to/scripts.min.js”)

        .done(function(){
          console.log(‘loaded addendum old ie’);
        });

    })

    //uh oh
    .fail(function(){
      console.log(‘did not load enquire’);
     });

}

I’m assuming, from my limited understanding of the magic that’s going on in the backend (and a lot of Googling), this has something to do with the asynchronous nature of what getScript is doing, in addition to multiple file loads, it can get hung up (which is the opposite of what I’d expect with async…right?). My Googling showed that others had a similar problem and I saw the jQuery .ajax method suggested as an alternative. If you check out the documentation there are A LOT of options for .ajax. I came across jQuery.getScripts by David Hudson which uses the .ajax method to create a simple function for loading multiple files and controlling the cache and async settings. I tried this instead of the getScript method or trying to wrap my brain around the entirety of the .ajax method. Aaaaand… after turning the async option off, it worked—no more page hangups/random failure to load the scripts! Below is how I’m using it to load Enquire.js.

if (Modernizr.matchmedia){

  //modern browser detect
  console.log(‘matchmedia detected’);

  //load enquire and our scripts
  $.getScripts({
    urls: [‘path/to/enquire.min.js’, ‘path/to/scripts.min.js’],
    cache: true, 
    async: false, 
    success: function(response) {
      console.log(‘loaded enquire and addendum’);
    }
  });

} else {

 //older browser detected
 console.log(‘matchmedia not detected’);

  //load the matchMedia polyfill
  $.getScripts({
    urls: [‘path/to/match.media.min.js’],
    cache: true, 
    async: false, 
    success: function(response) {
      //next load enquire and our scripts
      console.log(‘match media loaded’);
      $.getScripts({
        urls: [‘path/to/enquire.min.js’, ‘path/to/scripts.min.js’],
        cache: true, 
        async: false, 
        success: function(response) {
          console.log(‘enquire and addendum loaded’);
        }
      });
    }
  });

}

That’s my solution! Is there a better way to do this? Let me know if I’m an idiot (gently).