Comments on: Avoiding DOM flickering

By: Trevor Saint

Trevor Saint — Fri, 05 Mar 2010 15:57:09 +0000

What we tend to do is have a separate style sheet called js.css and inside that we have all of our js styled content.

We then on load add the class to say the body or even the html element, and add the js.css file using JavaScript.

Then if the js class exists all content is styled using the js.css stylesheet. If this does not exist content is styled as normal. So this way everything is still available to our users.

You do still notice a slight flicker even using this method but it’s much quicker than using js to hide elements on the fly initially.

By: Douglas Neiner

Douglas Neiner — Thu, 06 Aug 2009 14:07:50 +0000

Great post! I forgot that you can edit the dom after you know an element exisits vs. waiting for domReady or similar event. Will def. use this moving forward.

By: Paul Irish

Paul Irish — Wed, 05 Aug 2009 14:16:53 +0000

The solution I’ve been using now is as follows:

<html class="nojs">
<head>
  <script type="text/javascript">
  (function(B,C){B[C]=B[C].replace(/bnojsb/,'js')})(document.documentElement,'className');
  </script>

That script line is more or less a minified version of:

document.documentElement.className = document.documentElement.className.replace('nojs','js');

I, like you, really enjoy the ‘nojs’ approach so you can explicitly write CSS for the un-enhanced case.

By: Simon Kenyon Shepard

Simon Kenyon Shepard — Sun, 26 Jul 2009 13:46:20 +0000

Hi James,

nice blog entry, glad you covered this one. The name ‘Dom flicker’ is probably more descriptive, I find this phenomenon has started being referred to as ‘FOUC’ or Flash of unstyled content, whereas really it should be flash of mis-styled content – but that’s not as catchy.

Personally, I go with your method of not using document.write (the horror, the horror) but just adding in a bit of script that adds the class to the HTML tag, then all your css can actually go after that bit of script, I wrote a walk through back in January to explain:

Avoiding FOUC

By: Krijn Hoetmer

Krijn Hoetmer — Sat, 25 Jul 2009 19:40:04 +0000

Since the body tag isn't required, I recently started writing that one out with JavaScript: ...</head><script>document.write('<body class=yay-and-hooray-js-is-on>')</script><h1>...</h1>. Or is that too hacky? :)

By: Dan G. Switzer, II

Dan G. Switzer, II — Thu, 23 Jul 2009 21:58:32 +0000

What I meant to say about noscript, is that you’d declare a default style which like:

.js-hide { display: none; }

Then inside a noscript block, you’d do:

.js-hide { display: block; }

You could also use visibility instead if you plan on using this technique w/non-block elements.

By: Dan G. Switzer, II

Dan G. Switzer, II — Thu, 23 Jul 2009 21:56:28 +0000

@James:

It was essentially the same code you posted, but I just write the .js-hide CSS class using JS. That way browsers with JS enabled won’t see the flicker, when JS is disabled the element shows as normal.

You could also just place the style block inside noscript tags if you wanted to avoid document.write() altogether.

By: Phunky

Phunky — Thu, 23 Jul 2009 21:37:01 +0000

You’re quite right Bryan, but it’s all relative to the reasons why your hiding it in the first place. I would expect if you even need to worry about doing something like this you will already be heavily dependent on JS being enabled.

By: Bryan Buchs

Bryan Buchs — Thu, 23 Jul 2009 20:23:39 +0000

@Phunky – If you do that, people who have CSS enabled and JS disabled would never see those elements. And there are more of those than you think.

By: Phunky

Phunky — Thu, 23 Jul 2009 19:48:51 +0000

In an ideal world the element should already be hidden via CSS – if your going to hide said element onLoad why should it be visible in the first place?

Either way, you still demonstrate a useful way of triggering this before onLoad and any domReady function,