deferred js loader

loader.js

(function() {
  function load() {
    var scripts = document.getElementsByClassName("js-defer");
    var i;
    for (i = 0; i < scripts.length; i++) {
      var scriptElement = document.createElement("script");
      scriptElement.src =scripts[i].href;
      document.body.appendChild(scriptElement);
    }
  }
  if (window.addEventListener) {
    window.addEventListener("load", load, false);
  } else if (window.attachEvent) {
    window.attachEvent("onload", load);
  } else {
    window.onload = load;
  }
})();

loader.min.js

!function(){function e(){var e,n=document.getElementsByClassName("js-defer");for(e=0;e<n.length;e++){var t=document.createElement("script");t.src=n[e].href,document.body.appendChild(t)}}window.addEventListener?window.addEventListener("load",e,!1):window.attachEvent?window.attachEvent("onload",e):window.onload=e}();

usage.md

#Deferred js loader

asset loader for preloaded (rel=preload) js scripts.

it's not a polyfill. it's just a small script load assets declared with preload

add js assets as per the new w3c Recommendation

<link rel="preload" class="js-defer" href="defer.js" as="script">

notice js-defer and class. this class will be used for finding out which scripts to load.

copy and paste asset_loader.min.js at the bottom of body tag.

based on - https://varvy.com/pagespeed/defer-loading-javascript.html

live example - https://www.refrens.com