我想生成具有可以有条件地显示/隐藏的区域（div，spans）的html布局。默认情况下隐藏这些区域。
如果我在document.ready上使用jquery调用.hide（）方法，这些区域可能会闪烁（浏览器呈现部分加载的文档）。所以我在html布局中应用“display：none”样式。
我想知道避免眨眼的最佳做法是什么，因为应用“display：none”打破了封装规则 - 我知道jquery用hide / show做什么并使用它。如果jquery的隐藏/显示实现有一天会改变，我会让整个网站变得不可行。
提前谢谢
答案 0 :(得分：33)
@Andrew，
我知道答案已被接受，但使用display: none;对于没有Javascript的用户来说将是一场噩梦。
使用内联Javascript，您可以隐藏元素，而不会闪烁。没有Javascript的用户仍然可以看到它。
考虑在页面加载时应隐藏的几个div。
<head>
<script type="text/javascript" src="jQuery.js"></script>
</head>
<body>
<div id="hide-me">
... some content ...
</div>
<script type="text/javascript">
$("#hide-me").hide();
</script>
<div id="hide-me-too">
... some content ...
</div>
<script type="text/javascript">
$("#hide-me-too").hide();
</script>
</body>
内联Javascript将在呈现元素时立即运行，从而将其隐藏在用户之外。
答案 1 :(得分：5)
我同意BorisGuéry的观点，即它不是过度工程化，而是标准的最佳实践。我会采用与Boris略有不同的方式，首先在html中添加一个no-js类，然后用JavaScript删除它。
这样您就不会等待文档准备好隐藏内容，而且没有任何JavaScript，您仍然可以看到内容。假设用户没有JavaScript更符合渐进增强的理念。
前：
<html class="no-js">
<body>
<div id="foo"></div>
</body>
</html>
我的css：
#foo {
display: none;
}
html.no-js #foo {
display: block;
}
和javascript
$(document).ready(
function()
{
$('html').removeClass('no-js');
}
);
*********或基于每个案例***********
例如：
<div class="no-js" id="foo">foobar and stuff</div>
的CSS：
.no-js {
display:none;
}
#foo {
display: block;
}
#foo.no-js {
display: none;
}
JS：
$(document).ready(function(){
// remove the class from any element that has it.
$('.no-js').removeClass('no-js');
});
答案 2 :(得分：3)
我通常在我的元素中设置.js类，以便在启用javascript时设置正确的属性。
然后我可以根据javascript是否存在来设置CSS。
前：
<html class="js">
<body>
<div id="foo"></div>
</body>
</html>
我的css：
html.js #foo
{
display: none;
}
和javascript
$(document).ready(
function()
{
$(html).addClass('js');
}
);
答案 3 :(得分：3)
设置元素的初始显示属性绝对没有错，特别是如果将其封装在css类中。
答案 4 :(得分：3)
我也在努力解决这个问题，特别是在IE中，我发现这非常有用：http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/
答案 5 :(得分：3)
为什么不这样做？：
// Hide HTML element ASAP
$('html').hide();
// DOM-ready function
$(function () {
// Do stuff with the DOM, if needed
// ...
// Show HTML element
$('html').show();
}
似乎工作正常！
问候。
答案 6 :(得分：1)
你可以在CSS类中应用“display：none”。
因为浏览器必须读取一些HTML代码才能让JavaScript找到Element。当浏览器读取您的HTML时，您必须将元素标记为隐藏。
您还可以在JavaScript中插入HTML，并且可以在呈现之前调用hide。
答案 7 :(得分：0)
我总是会使用Modernizr.js http://modernizr.com/来处理这个问题。
使用Mondernizr，您的页面的HTML标记中会添加一个“js”或“no-js”类。
从这里，只有当html标签具有js类时，才能隐藏元素。
Modernizr非常适合其他许多应用程序，如果您之前没有使用它，请继续阅读：http://modernizr.com/docs/
答案 8 :(得分：0)
我一直在做的是创建一个空div。如果需要显示该组件中的某些数据，我会使用$ .ajax（）异步加载数据（即html）。
无需额外的lib。
答案 9 :(得分：0)
这是我的建议。它利用this solution 创建新的CSS规则。主要的事情是：如果JS可用，将创建隐藏某些html的CSS类，否则不会。这发生在之前主要内容（应该最初隐藏的html部分）得到处理！
<html>
<head>
<style>
/* This class gets overwritten if JS is enabled. If a css file (bootstrap, ...)
gets loaded with such a class this would be also overwritten. This solution does
not require the class. It is here just to show that it has no effect
if JS is activated.*/
.hidden {
display: block;
background: red;
}
</style>
<script>
// this is copied from the linked stackoverflow reply:
function setStyle(cssText) {
var sheet = document.createElement('style');
sheet.type = 'text/css';
/* Optional */
window.customSheet = sheet;
(document.head || document.getElementsByTagName('head')[0]).appendChild(sheet);
return (setStyle = function (cssText, node) {
if (!node || node.parentNode !== sheet)
return sheet.appendChild(document.createTextNode(cssText));
node.nodeValue = cssText;
return node;
})(cssText);
}
// And now: This class only gets defined if JS is enabled. Otherwise
// it will not be created/overwritten.
setStyle('.hidden { display: none; }');
// Attention: Now that the class is defined it could be overwritten
// in other CSS declarations (in style tags or with loaded CSS files).
</script>
</head>
<body>
<button>Show/Hide</button>
<div class="">before</div>
<div class="my-element hidden">
Content that should be initially hidden if possible.
You may want to multiply this div by some thousands
so that you see the effect. With and without JS enabled.
</div>
<div class="">after</div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
// Here is some 'normal' JS code. Very likely loaded as a JS file:
$('button').click(function () {
$('.my-element').toggleClass('hidden');
// or setting display directly:
// $('.my-element').toggle()
// but well, having class hidden though it is not
// hidden makes is not so nice...
})
</script>
</body>
</html>
有点复杂，但我认为这是一个合适的解决方案。优点是可以防止闪烁，并且如果未启用JS，则可以使用闪烁。并且它不需要jQuery。
答案 10 :(得分：0)
经过一段时间的思考，我已经有了以下解决方案的想法。与我的other solution相比，我已将其缩减为必要部分（并使用this通过JS添加类）：
<html>
<head>
<style>
/* This could be also part of an css file: */
.container-with-hidden-elements .element {
display: none;
}
</style>
</head>
<body>
<div class="container">
<script>
document.getElementsByClassName('container')[0]
.className += ' container-with-hidden-elements';
</script>
<div class="element">Content that should be initially hidden if possible.</div>
</div>
</body>
</html>
脚本标记立即执行，并将一个类添加到容器中。在这个容器中有一些现在隐藏的嵌套元素，因为容器有特殊的类，并且有一个现在有效的CSS规则。
同样，这发生在剩余的html被处理之前（防止闪烁）。而且，如果禁用JS，默认情况下所有元素都是明显的 - 可称为Progressive enhancement。
不确定这是否适用于所有浏览器。但IMO将是简单而又整洁的解决方案。
答案 11 :(得分：0)
有很多答案，您可以使用show（）方法并对要显示或隐藏的条件进行编码。这是示例代码show_hide when rendering is complete
<div id="banner-message">
<p id="hello">Hello World!!!!!</p>
<input id="statusconf" value="" type="checkbox">Show hello world text when i click this check box
<button>Change color</button>
</div>
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
banner.addClass("alt")
})
//Set this up as part of document ready if you wish
//$(document).ready(function(e) {
$("#statusconf").show(function(e) {
if ($("#statusconf").is(':checked') === false) {
$('#hello').hide();
} else {
$("#hello").show();
}
});
$("#statusconf").on("click", function(e) {
if ($("#statusconf").is(':checked') === false) {
$('#hello').hide();
} else {
$("#hello").show();
}
});
//});