Skip to content

Instantly share code, notes, and snippets.

@mjlescano
Last active August 29, 2015 14:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mjlescano/be85e5724d9967475b18 to your computer and use it in GitHub Desktop.
Save mjlescano/be85e5724d9967475b18 to your computer and use it in GitHub Desktop.
Synchronous css loading, but caching it on localStorage. Based on https://gist.github.com/hdragomir/8f00ce2581795fd7b1b7, to be used on http://goodpeople.com
;(function(w, d){
var rAF = w.requestAnimationFrame
|| w.mozRequestAnimationFrame
|| w.webkitRequestAnimationFrame
|| w.msRequestAnimationFrame
|| function(f){ setTimeout(f, 0) }
var s = window.localStorage
var available = null
function localStorageAvailable() {
if( null !== available ) return available
var key = 'CACHE_test'
try {
s.setItem(key, '1')
s.removeItem(key)
available = true
} catch (e) {
available = false
}
return available
}
function setFileCache(href, text){
s['CACHE_'+href] = text
}
function getFileCache(href){
return s['CACHE_'+href]
}
function injectCss(href, cb){
link = d.createElement('link')
link.href = href
link.rel = 'stylesheet'
link.type = 'text/css'
link.onerror = cb
link.onload = cb
d.getElementsByTagName('head')[0].appendChild(link)
if( !'onload' in d.createElement('link') ) cb()
}
function injectRawCss(text){
var style = d.createElement('style')
style.setAttribute('type', 'text/css')
if( style.styleSheet ){
style.styleSheet.cssText = text
} else {
style.innerHTML = text
}
d.getElementsByTagName('head')[0].appendChild(style)
}
function get(url, callback) {
var xhr
xhr = new(this.XMLHttpRequest || ActiveXObject)('MSXML2.XMLHTTP.3.0');
xhr.open('GET', url, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
xhr.readyState > 3 && callback && callback(xhr.responseText, xhr);
};
xhr.send()
}
w.loadCachedCss = function(href, callback){
var cbCalled = false
var cb = function(){
if( !cbCalled && callback ) rAF(callback)
cbCalled = true
}
setTimeout(cb, 5000)
if( !localStorageAvailable() || !XMLHttpRequest ){
injectCss(href, cb)
return null
}
var cache = getFileCache(href)
if( cache ){
injectRawCss(cache)
cb()
return true
} else {
get(href, function(response){
injectRawCss(response)
cb()
setFileCache(href, response)
})
return false
}
}
})(window, document)
!function(e,t){function n(){if(null!==c){return c}var e="CACHE_test";try{l.setItem(e,"1"),l.removeItem(e),c=!0
}catch(t){c=!1}return c}function i(e,t){l["CACHE_"+e]=t}function a(e){return l["CACHE_"+e]
}function r(e,n){link=t.createElement("link"),link.href=e,link.rel="stylesheet",link.type="text/css",link.onerror=n,link.onload=n,t.getElementsByTagName("head")[0].appendChild(link),!1 in t.createElement("link")&&n()
}function s(e){var n=t.createElement("style");n.setAttribute("type","text/css"),n.styleSheet?n.styleSheet.cssText=e:n.innerHTML=e,t.getElementsByTagName("head")[0].appendChild(n)
}function o(e,t){var n;n=new(this.XMLHttpRequest||ActiveXObject)("MSXML2.XMLHTTP.3.0"),n.open("GET",e,!0),n.setRequestHeader("X-Requested-With","XMLHttpRequest"),n.setRequestHeader("Content-type","application/x-www-form-urlencoded"),n.onreadystatechange=function(){n.readyState>3&&t&&t(n.responseText,n)
},n.send()}var u=e.requestAnimationFrame||e.mozRequestAnimationFrame||e.webkitRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,0)
},l=window.localStorage,c=null;e.loadCachedCss=function(e,t){var l,c=!1,m=function(){!c&&t&&u(t),c=!0
};return setTimeout(m,5e3),n()&&XMLHttpRequest?(l=a(e),l?(s(l),m(),!0):(o(e,function(t){s(t),m(),i(e,t)
}),!1)):(r(e,m),null)}}(window,document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment