Stack overflow loading js

by Vladimir Trajkovski

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<body>
  <h1>Test javascript loading strategy</h1>
  <p id="result">Loading...</p>
  <p>Date:
    <input type="text" id="datepicker">
  </p>

</body>

JavaScript

function loadScript(url) {

      return new Promise(function(resolve, reject) {

        var script = document.createElement("script")
        script.type = "text/javascript";

        if (script.readyState) { //IE
          script.onreadystatechange = function() {
            if (script.readyState == "loaded" ||
              script.readyState == "complete") {
              script.onreadystatechange = null;
              resolve();
            }
          };
        } else { //Others
          script.onload = function() {
            resolve();
          };
        }

        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);

      });
    }

    var resources = [
      "https://code.jquery.com/jquery-2.2.3.min.js",
      "https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"
    ]

    function loadAllResources() {
      return resources.reduce(function(prev, current) {

        return prev.then(function() {
          return loadScript(current);
        });

      }, Promise.resolve());
    }

    loadAllResources().then(function() {
      $('#result').text('Everything loaded');
      $('#datepicker').datepicker();
    });