本文介绍了在页面加载之前,显示HTML元素的正确方法是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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.

所以我的要求:


  1. HTML元素最初不使用CSS隐藏

  2. 如果JS可用,这些元素是隐藏的,以至于它们永远不会显示,甚至不会立即显示。这意味着将它们从装载在身体末尾的JS中隐藏出来)。


推荐答案

像VKen一样,我更喜欢使用和的结构(这是什么使用)

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元素的正确方法是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 14:10