Skip to content

Instantly share code, notes, and snippets.

@skamenetskiy
Last active August 29, 2015 14:08
Show Gist options
  • Save skamenetskiy/ae88f05838b272971a32 to your computer and use it in GitHub Desktop.
Save skamenetskiy/ae88f05838b272971a32 to your computer and use it in GitHub Desktop.
Asynchronous Js/Css laoder
/**
* @preserve Copyright 2015 Semen Kamenetskiy <[email protected]>
*/
(function (win, doc, TYPE_SCRIPT, TYPE_CSS, TYPE_HEAD, TYPE_OBJECT, TYPE_STRING, TYPE_TEXT_JS, TYPE_TEXT_CSS, REL, MEDIA, ALL) {
var _elementParams = {};
_elementParams[TYPE_SCRIPT] = {
async: true,
type: TYPE_TEXT_JS
};
_elementParams[TYPE_CSS] = {
rel: REL,
type: TYPE_TEXT_CSS,
media: MEDIA
};
/**
* <head> container
* @type {HTMLHeadElement}
* @private
*/
var _head = doc.getElementsByTagName(TYPE_HEAD)[0];
/**
* Load element
* @param name
* @param url
* @returns {Node|undefined}
* @private
*/
function _element(name, url) {
/** Exit if url is not a string */
if (TYPE_STRING !== typeof(url)) {
return
}
/**
* New html element container
* @type {HTMLLinkElement|HTMLScriptElement|Node}
*/
var element = doc.createElement(name);
/** Merge element attributes */
for (var i in _elementParams[name]) {
if (_elementParams[name].hasOwnProperty(i)) {
element[i] = _elementParams[name][i]
}
}
/** If element is a script */
if (TYPE_CSS === name) {
element.href = url;
/**
* Stylesheets list
* @type {Stylesheet[]}
*/
var _sheets = doc.styleSheets;
/**
* Toggle stylesheets media when loaded
* @private
*/
function _toggleMedia() {
var defined;
for (var i = 0; i < _sheets.length; i++) {
if (_sheets[i].href && _sheets[i].href.indexOf(url) > -1) {
defined = true;
}
}
if (defined) {
element.media = ALL;
}
else {
setTimeout(_toggleMedia, 10);
}
}
_toggleMedia()
}
/** If element is a link */
else if (TYPE_SCRIPT === name) {
element.src = url;
}
return _head.appendChild(element)
}
/**
* Load single element or an object
* @param type
* @param object
* @param [i]
* @private
*/
function _getByObjectType(type, object, i) {
if (TYPE_OBJECT === typeof(object)) {
for (i in object) {
if (object.hasOwnProperty(i)) {
_element(type, object[i])
}
}
return
}
_element(type, object)
}
/**
* Async object
* @type {{js: js, css: css}}
* @expose
*/
win.async = {
/**
* Load js asynchronously
* @param js
* @expose
*/
js: function (js) {
_getByObjectType(TYPE_SCRIPT, js)
},
/**
* Load css asynchronously
* @param css
* @expose
*/
css: function (css) {
_getByObjectType(TYPE_CSS, css)
}
}
})(window, document, 'script', 'link', 'head', 'object', 'string', 'text/javascript', 'text/css', 'stylesheet', 'async', 'all');
/*
Copyright 2015 Semen Kamenetskiy <[email protected]>
*/
(function(n,g,h,k,p,q,r,s,t,u,v,w){function d(b,e){if(r===typeof e){var c=g.createElement(b),f;for(f in a[b])a[b].hasOwnProperty(f)&&(c[f]=a[b][f]);if(k===b){var d=function(){for(var b,a=0;a<l.length;a++)l[a].href&&-1<l[a].href.indexOf(e)&&(b=!0);b?c.media=w:setTimeout(d,10)};c.href=e;var l=g.styleSheets;d()}else h===b&&(c.src=e);x.appendChild(c)}}function m(b,a){var c;if(q===typeof a)for(c in a)a.hasOwnProperty(c)&&d(b,a[c]);else d(b,a)}var a={};a[h]={async:!0,type:s};a[k]={rel:u,type:t,media:v};
var x=g.getElementsByTagName(p)[0];n.async={js:function(a){m(h,a)},css:function(a){m(k,a)}}})(window,document,"script","link","head","object","string","text/javascript","text/css","stylesheet","async","all");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment