When I makes sites that have javascript that manipulate the page, and this manipulation occurs on page load, I often get a nasty flicker effect.
For instance if I had an accordion, the full content would need to be loaded as html, and then once loaded it could be wrapped up with javascript. This means that for a moment the full content is visible, and then it 'flickers' as some of it is hidden.
One solution would be to hide any flickering content with css, and then show it (as necessary) with the javascript. The problem is then the page wont work properly for people with no javascript.
Is there a better way? Thanks
When I makes sites that have javascript that manipulate the page, and this manipulation occurs on page load, I often get a nasty flicker effect.
For instance if I had an accordion, the full content would need to be loaded as html, and then once loaded it could be wrapped up with javascript. This means that for a moment the full content is visible, and then it 'flickers' as some of it is hidden.
One solution would be to hide any flickering content with css, and then show it (as necessary) with the javascript. The problem is then the page wont work properly for people with no javascript.
Is there a better way? Thanks
Share Improve this question edited May 31, 2017 at 10:35 Kevincore 5041 gold badge4 silver badges16 bronze badges asked Jun 28, 2011 at 11:03 EvanssEvanss 23.6k100 gold badges322 silver badges553 bronze badges 1- What event exactly are you using to initialize your javascript? Is it onLoad? – rciq Commented Jun 28, 2011 at 11:08
5 Answers
Reset to default 7I think the normal approach to this is to add a 'js' class to body as soon as possible:
<!doctype html>
...
<body>
<script>document.body.className='js';</script>
You'd then adopt some CSS rules to ensure content was hidden when JS is available, something like.
.js .accordion:nth-child(n+1) { display: none }
One nice way is using the document ready function in Jquery.
Check out this excellent article by Paul Irish - it's basically an inversion of the method you describe, hiding with CSS until JS loads. By adding <script>document.documentElement.className += 'js';</script> to the head, you basically get the benefits of hiding unstyled content before DOM ready, and also it doesn't mess up for those without Javascript.
If you change css properties after your page loads, such flickering will occur. The best way to be make the css have the same properties which the javascript manipulates it into. In that way you also make your page more efficient by skipping extra reflow/repaints in the browser. However a hack is to have have the javascript minimized and load it before your css load line.
There isn't a better way to do this that uses progressive enhancement. At some point you are going to need to load the whole page and then use javascript to hide what you don't want seen. However, because javascript can only execute on the DOM once it has been written you have to wait for it to be written before you can hide it. It's seems counter-intuitive, but there you go. That is the price we pay for manipulating the DOM :-)