$(document).ready() or similar.
There’s a nice technique to avoid the annoying visual kick.
The solution? Add a
.no-js class to your opening
docHTML = document.getElementsByTagName('html');
docHTML.className = docHTML.className.replace(/\bno-js\b/, '') + ' js';
This replaces your hardcoded
.no-js with a
.js class immediately.
.no-js class to override, or do it the other way around, you can now make sure the right CSS is going to be applied the first time, safe in the knowledge that DOM-ready scripts will soon kick in.
head element? If you’re familiar with Modernizr you’ll have seen this before as it uses a similar technique, that’s where I stole it from! See Paul Irish’s example from 2009.
html element exists and we sacrifice a minuscule performance hit for a bigger reward — no nasty page refreshing and no heavy restyling.