Two simple JavaScript functions for loading JavaScript and CSS Stylesheet files async in the browser.
/**
* loadJS - Load js files async.
*
* Usage:
*
* Place the loadJS function inline in the head of your page (it can also be
* included in an external JavaScript file if preferable).
*
* <head>
* ...
* <script>
* // include loadJS here...
* function loadJS( src ){ ... }
* // load a file with loadJS
* loadJS( "path/to/script.js" );
* </script>
* ...
* </head>
*
* NOTE: `loadJS` does nothing to manage execution order of requested scripts,
* so we do not advise using it to load multiple javascript files that depend
* on one another. It simply fetches a script and executes it as soon as
* possible. You can certainly use loadJS to load multiple scripts as long as
* those scripts are designed to execute independently of any other scripts
* being loaded by loadJS.
*
* @param {String} src URL of JS file.
* @return {DOMElement} The script DOM element.
*
* Repository: https://github.com/filamentgroup/loadJS
* Article: [How we make Responsive Web Design sites load fast as heck](http://filamentgroup.com/lab/performance-rwd.html)
* [c]2014 @scottjehl, Filament Group, Inc. Licensed MIT
*/
function loadJS(src) {
"use strict";
var ref = window.document.getElementsByTagName("script")[0];
var script = window.document.createElement("script");
script.src = src;
ref.parentNode.insertBefore(script, ref);
return script;
}
/**
* loadCSS - Load stylesheets async.
*
* @param {String} href URL of stylesheet
* @param {Element} before Optionally Element used as reference for
* injecting our <link>.
*
* By default, `before` uses the first <script> element in the page. However,
* since the order in which stylesheets are referenced matters, you might need
* a more specific location in your document.
*
* If so, pass a different reference element to the `before` argument and
* it'll insert before that instead. note: `insertBefore` is used instead of
* `appendChild`, for safety
*
* @param {String} media The target media type. If not set, defaults to
* `all`.
*
* @return {DOMElement} The stylesheet DOM element.
*
* Repository: https://github.com/filamentgroup/loadCSS
* Article: [How we make Responsive Web Design sites load fast as heck](http://filamentgroup.com/lab/performance-rwd.html)
* [c]2014 @scottjehl, Filament Group, Inc. Licensed MIT
*/
function loadCSS(href, before, media) {
"use strict";
var ss = window.document.createElement("link");
var ref = before || window.document.getElementsByTagName("script")[0];
ss.rel = "stylesheet";
ss.href = href;
// temporarily, set media to something non-matching to ensure it'll fetch
// without blocking render
ss.media = "only x";
// inject link
ref.parentNode.insertBefore(ss, ref);
// set media back to `all` so that the styleshet applies once it loads
setTimeout(function () {
ss.media = media || "all";
});
return ss;
}