Skip to content

Instantly share code, notes, and snippets.

@aymen-mouelhi

aymen-mouelhi/async_css.html

Forked from duzun/async_css.html
Last active August 29, 2015 14:19
Show Gist options
  • Save aymen-mouelhi/91d5488a4eac3a6138b0 to your computer and use it in GitHub Desktop.
Save aymen-mouelhi/91d5488a4eac3a6138b0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
async_css.html
<html>
<head>
<!-- The <script> switches rel="prefetch" to rel="stylesheet" at proper time, et voila, magic happens :-) -->
<link rel="prefetch" type="text/css" href="https://cdn.limitlesslane.com/css/mini/async_lib.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.limitlesslane.com/css/mini/lib.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.limitlesslane.com/css/mini/app.css" />
<link rel="prefetch" type="text/css" href="https://cdn.limitlesslane.com/css/mini/async_app.css" />
<script>
;(function(w,d){
(w.requestAnimationFrame||w.mozRequestAnimationFrame||w.webkitRequestAnimationFrame||w.msRequestAnimationFrame||w.oRequestAnimationFrame||
function(f){var e='load',n,h=w[n='addEventListener']||w[n='attachEvent']&&(e='on'+e);h?w[n](e,f):setTimeout(f,17)})
(function(){
for(var h=d.getElementsByTagName('link'),i=h&&h.length,l,c;0<i--;)
(l=h[i]).rel=='prefetch'&&l.type=='text/css'&&(c=d.createElement('link'),c.rel='stylesheet',c.type=l.type,c.href=l.href,l.parentNode.insertBefore(c,l))
})
})(window,document);
</script>
</head>
<body>
Load CSS in a non-blocking fashion
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment