当页面内容被操纵时停止 javascript 闪烁？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6505419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop javascript flicker when page's content is manipulated?
提问by Evanss
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.
当我制作具有操作页面的 javascript 的网站时，并且这种操作发生在页面加载时，我经常会得到令人讨厌的闪烁效果。
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.
例如，如果我有一个手风琴，则需要将全部内容作为 html 加载，然后一旦加载它就可以用 javascript 包装起来。这意味着有一段时间完整的内容是可见的，然后它“闪烁”，因为其中一些被隐藏了。
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.
一种解决方案是使用 css 隐藏任何闪烁的内容，然后（根据需要）使用 javascript 显示它。问题是该页面对于没有 javascript 的人将无法正常工作。
Is there a better way? Thanks
有没有更好的办法？谢谢
采纳答案by searlea
I think the normal approach to this is to add a 'js' class to body as soon as possible:
我认为通常的方法是尽快向 body 添加一个“js”类：
<!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.
然后，您将采用一些 CSS 规则来确保在 JS 可用时隐藏内容，例如。
.js .accordion:nth-child(n+1) { display: none }
回答by chrisf
Check out this excellent articleby 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.
看看Paul Irish 的这篇优秀文章——它基本上是你描述的方法的颠倒，用 CSS 隐藏直到 JS 加载。通过添加<script>document.documentElement.className += 'js';</script>到头部，您基本上可以获得在 DOM 准备好之前隐藏无样式内容的好处，而且对于那些没有 Javascript 的人来说也不会搞砸。
回答by Tom Squires
One nice way is using the document ready function in Jquery.
一种不错的方法是在 Jquery 中使用文档就绪功能。
回答by Troy SK
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.
如果您在页面加载后更改 css 属性，则会发生这种闪烁。使 css 具有与 javascript 操作它相同的属性的最佳方法。通过这种方式，您还可以通过跳过浏览器中的额外回流/重绘来提高页面效率。然而，一个技巧是将 javascript 最小化并在您的 css 加载线之前加载它。
回答by Alex
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 :-)
没有使用渐进增强的更好的方法来做到这一点。在某些时候，您将需要加载整个页面，然后使用 javascript 隐藏您不想看到的内容。但是，因为 javascript 只能在写入 DOM 后执行，所以您必须等待它被写入才能隐藏它。这似乎违反直觉，但你去了。这就是我们为操作 DOM 付出的代价 :-)
