Menu
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
243
I 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 }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
