在页面加载之前隐藏HTML元素的正确方法是什么?

Und*_*ion 5 javascript jquery html5 dom hide

我已经找到了这个问题的许多部分答案,但似乎没有什么似乎是一个明确的答案.对于这样一个重要的技术,我发现这有点奇怪.

我应该如何隐藏元素(使用javascript),以便在JS有机会隐藏它们之前页面加载时它们不会短暂出现?我不想将它们设置为最初使用CSS隐藏,就像用户没有Javascript一样,它们什么也看不见.

要清楚.我不是问如何处理向没有JS的用户显示内容.这是一个完全不同的主题.我只想要一种可靠的方法来隐藏HTML元素,然后再显示它们.

所以我的要求:

  1. 最初使用CSS不会隐藏HTML元素
  2. 如果JS可用,则隐藏这些元素,以便它们永远不会显示,甚至不会立即显示.这意味着将它们从身体末端加载的JS中隐藏出去).

ste*_*eax 5

和VKen一样,我更喜欢使用moderizrPaul Irish的html元素结构(这是HTML5 Boilerplate使用的)

<!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]-->
Run Code Online (Sandbox Code Playgroud)

然后在样式表中:

.element-to-hide { display: none; }

.no-js .element-to-hide { display: block; }
Run Code Online (Sandbox Code Playgroud)

效果很好,没有闪现的元素消失.