在页面加载之前，显示HTML元素的正确方法是什么？ [英] What is the correct way to hide HTML elements on page load before they are displayed?
问题描述
我已经发现了很多部分答案这个问题，但没有什么似乎是一个确定的答案。对于这样一个重要的技术，我发现这有点奇怪。
I have found numerous partial answers to this question, but nothing that seems like a definitive answer. For such an important technique I find this a little strange.
我应该如何隐藏元素（使用javascript），以便在JS之前加载页面时不会短暂出现有机会隐藏他们吗？我不想让他们最初用CSS隐藏，就好像用户没有Javascript一样，他们什么也看不到。
How should I hide elements (using javascript) so that they do not appear briefly when the page loads before the JS has a chance to hide them? I don't want to set them to hidden initially with CSS as if a user doesn't have Javascript, they will see nothing.
要清楚。我不是问如何处理向没有JS的用户显示内容。这是一个完全不同的主题。我只是想要一个可靠的方式来隐藏HTML元素，然后再显示它们。
To be clear. I'm not asking how to handle displaying content to users who don't have JS. That is an entirely different subject. I just want a reliable way to hide HTML elements before they are displayed.
所以我的要求：
- HTML元素最初不使用CSS隐藏
- 如果JS可用，这些元素是隐藏的，以至于它们永远不会显示，甚至不会立即显示。这意味着将它们从装载在身体末尾的JS中隐藏出来）。
推荐答案
像VKen一样，我更喜欢使用 moderizr 和 Paul Irish的 html 元素的结构（这是什么 HTML5 Boilerplate 使用）
Like VKen, I prefer to use moderizr and Paul Irish's structure for the html element (which is what HTML5 Boilerplate uses)
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
然后在样式表中：
.element-to-hide { display: none; }
.no-js .element-to-hide { display: block; }
工作得很好，没有闪烁的元素消失。
Works great, no flash of elements disappearing.
这篇关于在页面加载之前，显示HTML元素的正确方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
