More information about the Underscore mailing list

[_] fat javascript and flckering

Oliver Humpage oliver at watershed.co.uk
Thu Dec 3 11:19:05 GMT 2009 

On 3 Dec 2009, at 11:01, Marek Wawro wrote:

>    <body style="display:none;">
>        <noscript>
>        <style type="text/css">
>        body {display:block !important;}
>        </style>
>    </noscript>
>        <script type="text/javascript">
>            $(document).ready(function() { $("body").show(); }
> );
>        </script>

We had some problems with dshed.net flickering (non-JS users get a  
list view of work, JS users get an icon gridview by default, and  
sometimes JS users would see the flicker of listview first. In fact,  
that version is still live, you might see it now).

We investigated using noscript tags, but 1. it's nasty, 2. they're not  
valid in some doctypes and 3. It doesn't always fix the problem of the  
delay between running the JS and the browser applying it.

What we found worked was to set the div to be invisible as soon as it  
was rendered in the page using non-jQuery stuff, then use a looping  
function to check when the jQuery had taken effect (e.g. by measuring  
the dimensions of some element that should have changed) and then show  
the div again.

So:

<div id="changeMeForJS">
blah...
</div>
<script>
document.getElementById('changeMeForJS').style.visibility = "hidden";
</script>


Then in jQuery:

document.ready(function(){
	doStuffToDiv();
	makeDivVisible(1);
});
function makeDivVisible(i) {
	while ([test for whether doStuffToDiv has taken effect] && i<50) {
		setTimeout('makeDivVisible('+(i+1)+')', 50);
	}
}


It's a bit long winded, but it avoids the need for noscript tags, and  
also makes sure the div is only shown when the browser really has  
applied the changes to the canvas.

Oliver.