Skip to content

Instantly share code, notes, and snippets.

@hughevans
Created August 24, 2012 02:34
Show Gist options
  • Select an option

  • Save hughevans/3444897 to your computer and use it in GitHub Desktop.

Select an option

Save hughevans/3444897 to your computer and use it in GitHub Desktop.
No FOUT
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="wf-loading no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="wf-loading no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="wf-loading no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="wf-loading no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js wf-loading" lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<title>...</title>
<link href="/style.css" media="all" rel="stylesheet" type="text/css" />
<script src="/modernizr.js" type="text/javascript"></script>
</head>
<body>
...
<script>
//<![CDATA[
var _gaq = [['_setAccount', 'UA-...'], ['_trackPageview']];
Modernizr.load([
{
load: '/scripts.js'
}, {
test: Modernizr.fontface,
yep : 'http://use.typekit.com/....js',
callback: function() {
var removeWfLoading = function() {
with(document.documentElement) {
className = className.replace(/\bwf-loading\b/, 'wf-failed');
}
};
setTimeout(function() {
try { Typekit.load(); } catch(e) { removeWfLoading(); }
}, 10);
setTimeout(function() {
removeWfLoading();
}, 1000);
}
}, {
load: 'http://www.google-analytics.com/ga.js'
}
]);
//]]>
</script>
</body>
</html>
html.js.wf-loading {
opacity: 0;
}
html.js.wf-loading.ie6, html.js.wf-loading.ie7, html.js.wf-loading.ie8 {
visibility: hidden;
}
html.js.wf-active, html.js.wf-failed {
opacity: 1;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: .17s;
-moz-transition-duration: .17s;
-o-transition-duration: .17s;
transition-duration: .17s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
}
html.js.wf-active.ie6, html.js.wf-active.ie7, html.js.wf-active.ie8, html.js.wf-failed.ie6, html.js.wf-failed.ie7, html.js.wf-failed.ie8 {
visibility: visible !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment