Geek Answers Handbook

Does javascript stop flickering when manipulating page content?

When I create javascript sites that manipulate the page, and this manipulation occurs when the page loads, I often get an unpleasant flicker effect.

For example, if I had an accordion, the full content should be loaded as html, and then after downloading it, it can be wrapped using javascript. This means that for a moment the full content is displayed, and then it “flickers” as some of them are hidden.

One solution would be to hide any flickering content using css and then show it (if necessary) using javascript. The problem is that the page will not work correctly for people without javascript.

Is there a better way? thank

+5
source share
5 answers

I think the normal approach to this is to add the "js" class to the body as soon as possible:

<!doctype html>
...
<body>
<script>document.body.className='js';</script>

Then you have to accept some CSS rules to provide hidden content when JS is available, for example.

.js .accordion:nth-child(n+1) { display: none }
+3
source

Refuse this excellent article by Paul Irish - this is basically an inverse of the method that you describe hiding from CSS before loading JS. Adding <script>document.documentElement.className += 'js';</script>to the head, you basically get the benefits of hiding unallocated content before the DOM is ready, and also it will not ruin for those who do not have Javascript.

+1
source

JQuery.

0

css , . css , javascript . , , reflow/repaint . javascript css.

0

There is no better way to do this using progressive expansion. At some point you will need to load the entire page, and then use javascript to hide what you do not want to see. However, since javascript can only be executed on the DOM after it is written, you need to wait for it to be written before you can hide it. It seems counterintuitive, but there you go. This is the price we pay for manipulating the DOM :-)

-1
source

More articles:


All Articles