Advertisement
Guest User

Assync css loader

a guest
Jan 3rd, 2016
260
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script type="text/javascript">
  2.     (function(){
  3.         window.asyncCss=function(hrefs,options){"use strict";var Cache=function(filename){var localStorage=options.localStorage,getKey=function(filename){var re=/[\:\.\#=\\\/-]/g;return options.ns+filename.replace(re,"_")},key=filename?getKey(filename):null;return{cleanupOldVersions:function(){var k,parts=key.split("?");for(k in localStorage){if(k!==key&&k.indexOf(parts[0])===0){utils.log("invalidates obsolete `"+k+"`",8);localStorage.removeItem(k)}}},set:function(content){this.cleanupOldVersions();localStorage.setItem(key,content)},get:function(){try{return localStorage?localStorage.getItem(key):null}catch(e){return null}},isAvailable:function(){return!!localStorage},isLocalStoageWrittable:function(){try{localStorage.setItem("test","test");localStorage.removeItem("test");return true}catch(e){return false}}}},utils={on:function(el,ev,callback){if(el.addEventListener){el.addEventListener(ev,callback,false)}else if(el.attachEvent){el.attachEvent("on"+ev,callback)}},isIphone:function(){var re=/iPhone|iPad|iPod/i;return re.test(options.userAgent)},logMsgs:[],log:function(msg,code){this.logMsgs.push({msg:msg,code:code});options.debug&&console.log("asyncCss: "+msg)}},Loader=function(cache){return{_injectRawStyle:function(text){var node=document.createElement("style");node.innerHTML=text;options.node.appendChild(node)},_loadCssForLegacyBrowser:function(cssHref){var node=document.createElement("link");node.href=cssHref;node.rel="stylesheet";node.type="text/css";options.node.appendChild(node)},_loadCssForLegacyAsync:function(cssHref){var that=this,xhr=new options.XMLHttpRequest;xhr.open("GET",cssHref,true);utils.on(xhr,"load",function(){if(xhr.readyState===4){utils.log("`"+cssHref+"` is loaded",5);that._injectRawStyle(xhr.responseText);if(!utils.isIphone()&&cache.isLocalStoageWrittable()){utils.log("localStorage available, caching `"+cssHref+"`",4);cache.set(xhr.responseText)}}options.done(utils.logMsgs)});xhr.send()},loadCss:function(cssHref){var fetch;if(!cache.isAvailable()||!options.XMLHttpRequest){utils.log("fallback loading `"+cssHref+"`",3);this._loadCssForLegacyBrowser(cssHref);return options.done(utils.logMsgs)}fetch=cache.get();if(fetch){utils.log("`"+cssHref+"` injected from the cache",2);this._injectRawStyle(fetch);return options.done(utils.logMsgs)}utils.log("start loading `"+cssHref+"` (asynchronously)",1);this._loadCssForLegacyAsync(cssHref)}}},i=0,l=hrefs.length;options=options||{};options.debug=options.debug||false;options.ns=options.ns||"css_cache_";options.node=options.node||document.getElementsByTagName("head")[0];options.userAgent=options.userAgent||window.navigator.userAgent;options.localStorage=typeof options.localStorage!=="undefined"?options.localStorage:window.localStorage;options.XMLHttpRequest=typeof options.XMLHttpRequest!=="undefined"?options.XMLHttpRequest:window.XMLHttpRequest;options.done=options.done||function(){};window.asyncCss.cleanup=function(){var k;if(!options.localStorage){return}for(k in options.localStorage){options.localStorage.removeItem(k)}};for(;i<l;i++){new Loader(new Cache(hrefs[i])).loadCss(hrefs[i])}};        
  4.         try {
  5.             asyncCss( ["{path-to-css-1}","{path-to-css-2}"] );
  6.         } catch( e ) {
  7.             console.log( "asyncCss: exception " + e );
  8.         }
  9.     }());
  10. </script>
  11.  
  12. <noscript>
  13.     <link type="text/css" rel="stylesheet" media="all" href="{path-to-css-1}" />
  14.     <link type="text/css" rel="stylesheet" media="all" href="{path-to-css-2}" />
  15. </noscript>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement