Create a Promise that resolves when jQuery loads

Question

I'm currently experimenting with async loading of JavaScript and came up with the following trick to detect when jQuery loads:

var jQueryPromise = new Promise(function(resolve) {
  Object.defineProperty(window, '$', {
    get: function() {
      return this.jQuery;
    },
    set: function(value) {
      if (typeof value === 'function') {
        resolve(value);
      }
    }
  });
  if (typeof jQuery === 'function') {
    $ = jQuery;
  }
});

jQueryPromise.then(function($) {
    // use $ normally here
});

The idea is to have a method which works regardless of how and when jQuery was loaded (via a script tag, async script tag, script created via document.createElement...)

My aim is really just to understand how to best utilise async loading in general - all comments are welcome, especially regarding possible quirks of this (hacky) approach.

In addition, I'm curious whether there are any performance advantages to loading jQuery async and then waiting for the Promise to resolve using this method over just loading it normally before the script (and in which cases would this performance boost happen)?

Answer 1

I agree with @joseph-the-dreamer. I'd say, requirejs or any other libraries which are implementing AMD, CommonJS or ES6 import approaches will be good choice.

Moreover, from architectural point of view it's quite strange to implement loading logic only for jQuery or any other specific dependency.

In general, I'd recommend you to look at Webpack or Browserify.

Answer 2

This is... hacky. It's extra code that could have just gone away if you just loaded your scripts through proper methods.

• If jQuery is ubiquitous, it might be more beneficial to just load it up front.
• If you have a build step, then compile it as a dependency of your app.
• If you're doing asynchronous modules, consider using RequireJS.

In addition, browser cache will do its part to reduce loading times. Only the initial load will be slow. Also, async does not help in any way with load speed. It only reduces the time your script will block the HTML.