Dynamic Script Enqueuing for the DOM

enqueueScript.js

/**
 * Enqueue scripts dynamically into DOM.
 * Example usage
 * 
 * enqueueScript({
 *   'html2canvas': {
 *     id: 'html2canvas',
 *     url: 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js',
 *     onload: () => {
 *       // code
 *     },
 *   },
 *   'FileSaver': {
 *     id: 'FileSaver',
 *     url: 'https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js',
 *   },
 * }, () => {
 * 
 *     // code
 * 
 * });
 * 
 * @param  Object  scripts  [Scripts object]
 * @param  Boolean callback [Callback function to call after all the scripts are loaded]
 * @return Void
 */
function enqueueScript(scripts, callback = false) {

  var key, key2, script, scriptId, scriptUrl, scriptElem, scriptExists, scriptsLength, scriptsLoaded, scriptAttributes;

  scriptsLoaded = scriptsLength = 0;

  for (key in scripts) {

    scriptsLength++;

  }

  for (key in scripts) {

    if (typeof scripts[key].id === 'undefined') scripts[key].id = key;

    script = scripts[key];
    scriptId = script.id;
    scriptUrl = script.url;
    scriptAttributes = typeof script.attributes === 'undefined' ? {} : script.attributes;
    scriptExists = document.querySelector('script#' + scriptId);

    if ( !scriptExists ) {

      scriptElem = document.createElement('script');
      scriptElem.src = scriptUrl;
      scriptElem.id = scriptId;

      for (key2 in scriptAttributes) {

        scriptElem[key2] = scriptAttributes[key2];

      }

      if (document.head) {

        document.head.appendChild(scriptElem);

      } else if (document.body) {

        document.body.appendChild(scriptElem);

      } else {

        return; // no place to add the script

      }

      scriptElem.onload = function(script) {

        script = scripts[script.target.getAttribute('id')];
        scriptsLoaded++;

        if ( typeof script.onload === 'function' ) {

          script.onload();

        }

      }

    /**
     * Callback function to run after script is loaded 
     */
    } else if ( scriptExists && typeof script.onload === 'function' ) {

      script.onload();
      scriptsLoaded++;

    } else if ( scriptExists && typeof script.onload === 'undefined' ) {

      scriptsLoaded++;

    }

  }

  if ( typeof callback === 'function' ) {

    var interval = setInterval(function() {

      if (scriptsLength === scriptsLoaded) {

        callback();
        clearInterval(interval);

      }

    }, 100);

  }

}