Create a Basic Loader with JavaScript Promises

I've used JavaScript loaders for years; whether it was the Dojo loader, curl.js, or even using jQuery as a JavaScript loader, it's incredibly useful to request a set of resources and react once they've completed loading.  Each JavaScript loader is feature-packed, efficient, and does a wonderful job of shimming the Promise API which didn't exist in the browser when the loader is created.  The following is not that type of loader.

This super simple loader allows for loading of image, CSS, and JavaScript files, using the Promise API, and fires a callback upon success or failure.  This tiny "loader" (I shouldn't even call it that) does not:

• cache results (though that would be easy)
• provide a module/object back
• do AJAX calls (though a XHR-to-Promise shim is available, or you can use fetch)
• ... or anything else advanced

Here is the tiny "loader" in all of its glory:

var load = (function() {
  // Function which returns a function: https://davidwalsh.name/javascript-functions
  function _load(tag) {
    return function(url) {
      // This promise will be used by Promise.all to determine success or failure
      return new Promise(function(resolve, reject) {
        var element = document.createElement(tag);
        var parent = 'body';
        var attr = 'src';

        // Important success and error for the promise
        element.onload = function() {
          resolve(url);
        };
        element.onerror = function() {
          reject(url);
        };

        // Need to set different attributes depending on tag type
        switch(tag) {
          case 'script':
            element.async = true;
            break;
          case 'link':
            element.type = 'text/css';
            element.rel = 'stylesheet';
            attr = 'href';
            parent = 'head';
        }

        // Inject into document to kick off loading
        element[attr] = url;
        document[parent].appendChild(element);
      });
    };
  }
  
  return {
    css: _load('link'),
    js: _load('script'),
    img: _load('img')
  }
})();

// Usage:  Load different file types with one callback
Promise.all([
    load.js('lib/highlighter.js'), 
    load.js('lib/main.js'), 
    load.css('lib/highlighter.css'),
    load.img('images/logo.png')
  ]).then(function() {
    console.log('Everything has loaded!');
  }).catch(function() {
    console.log('Oh no, epic failure!');
  });

A load object is created  with js, css, and img functions which accept a URL to load.  Each function returns a Promise and the onload or onerror event of the resource's tag triggers resolve or reject for the promise.  Promise.all collects the resources to be loaded and then triggers upon successful load of all resources, catch if any of them fail.

I have to stress that this is meant to be a very, very simple "loader"; please save the comments about how it doesn't have bells and whistles that other loaders have. I love how awesome the Promise API makes async and resource loading management, as does the ServiceWorker API and fetch API.  Do yourself a favor and check out these awesome APIs!