Comments on: Eliminating redisplay flashes in JavaScript

By: BarelyBlogging » Blog Archive » Eliminating redisplay flashes in JavaScript

Tue, 14 Mar 2006 05:25:55 +0000

[...] Welcome, Ajaxians! [...]

By: Kae Verens

Kae Verens — Sun, 12 Mar 2006 10:42:14 +0000

I’ve used something similar in the past, except hiding the entire page instead of a specific class. For example, my Borders demo, http://verens.com/demos/borders/test.html, redraws the borders of classes where the CSS demands curves. To reduce flicker, the script hides the entire page upon activation (see in the init() function), then shows the page when it is complete.

By: Patrick Fitzgerald

Patrick Fitzgerald — Sun, 12 Mar 2006 03:21:06 +0000

Regarding the “alternate stylesheet” method, it’s unreliable since the browser loads the external stylesheet.

Another technique I tried is to hide the content, but then use a NOSCRIPT element to display it. Unfortunately NOSCRIPT cannot be used in the HEAD element, so it’s not valid code, but it does work.

By: Patrick Fitzgerald

Patrick Fitzgerald — Fri, 10 Mar 2006 05:40:19 +0000

How about creating an external stylesheet that defines .javascript-hide-me { display:none; }, but link to it as an alternate stylesheet so it won't be applied by default. Then use JavaScript to change it from "alternate stylesheet" to "stylesheet", so it will be applied. I tried it here and it works in Firefox and IE6 on Windows.

By: Patrick Fitzgerald

Patrick Fitzgerald — Fri, 10 Mar 2006 04:45:22 +0000

@bobby and Stephen: thanks for the comments – I have added your information and links to my original post.

By: Stephen Clay

Stephen Clay — Fri, 10 Mar 2006 02:45:16 +0000

Bobby’s is very well thought-out, but I prefer the simplicity of Patrick’s technique, especially because you don’t have to load a whole library of functions that slows page loading even more! XHTML and serving as XML is overrated anyway IMO.

I would only add a check for DOM compatibility before document.write-ing in the STYLE block: if (typeof document.getElementsByTagName != "undefined") {document.write...}

By: bobby

bobby — Thu, 09 Mar 2006 22:10:15 +0000

Maybe this will come in handy: http://www.bobbyvandersluis.com/articles/dynamicCSS.php

By: Neville Burnell

Neville Burnell — Thu, 09 Mar 2006 21:14:16 +0000

(oops, hit submit too soon … to continue)

So this post helps because my approach doesnt handle the “javascript disabled” problem – thanks.

By: Neville Burnell

Neville Burnell — Thu, 09 Mar 2006 21:07:58 +0000

I handled this issue in a similar way … I added “display:none” to the style of the “tabber div” to hide it during the manipulation, then used prototypes Element.show() to display it when done.

By: Ryan Brooks

Ryan Brooks — Thu, 09 Mar 2006 18:42:23 +0000

Instead of using document.write to add the CSS, I would have taken it a little bit further... and of course, used the DOM.

js = document.createElement('style');
js.appendChild(document.createTextNode('.javascript-hide-me{display:none;}'));
js.type = 'text/css';
document.getElementsByTagName('head').item(0).appendChild(js);

-Ryan