如何在使用 jQuery 加载页面之前隐藏 HTML 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2951053/
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
How do I hide an HTML element before the page loads using jQuery
提问by Robert
I have some JQuery code that shows or hides a div.
我有一些显示或隐藏 div 的 JQuery 代码。
$("div#extraControls").show(); // OR .hide()
I initially want the div to be not visible so I used:
我最初希望 div 不可见，所以我使用了：
$(document).ready(function() {
$("div#extraControls").hide();
});
However, on the browser, the content loads visible for a second before disappearing, which is not what I want.
但是，在浏览器上，内容在消失之前加载一秒钟可见，这不是我想要的。
How do I set the hide the element before the page loads whilst keeping the ability to show hide it dynamically with a script?
如何在页面加载之前设置隐藏元素，同时保持使用脚本动态显示隐藏元素的能力？
回答by
div.hidden
{
display: none
}
<div id="extraControls" class="hidden">
</div>
$(document).ready(function() {
$("div#extraControls").removeClass("hidden");
});
回答by OMGKurtNilsen
Make a css class
创建一个 css 类
.hidden {
display: none;
}
Add this to any element you don't want to be visible when loading the page. Then use $("div#extraControls").show();to display it again.
将此添加到您不希望在加载页面时可见的任何元素。然后使用$("div#extraControls").show();再次显示它。
回答by Caleb
In CSS:
在 CSS 中：
#extraControls { display: none; }
Or in HTML:
或者在 HTML 中：
<div id="extraControls" style="display: none;"></div>
回答by Ravi
#toggleMe //Keep this in your .css file
{
display:none;
visibility:inherit;
background-color:#d2d8c9;
}
<a href="#" onclick="return false;">Expand Me</a>
///this way u can make a link to act like a button too
<div id="toggleMe"> //this will be hidden during the page load
//your elements
</div>
///if you decide to make it display on a click, follow below:
<script type="text/javascript" src="jquery.js"> </script> //make sure u include jquery.js file in ur project
<script type="text/javascript">
$(document).ready(function () {
$("a").click(function () {
$('#toggleMe').toggle("slow"); //Animation effect
});
});
</script>
///Now for every alternate click, it shows and hides, but during page load; its hidden.
//Hope this helps you guys ...
回答by Brett Ryan
With CSS3 you can actually hide content until a page loads by taking advantage of the :only-childselector.
使用 CSS3，您实际上可以利用:only-child选择器隐藏内容，直到页面加载完毕。
Here is a demonstration of how to do this. The basic idea is that CSS while loading will add a single node to the DOM while loading that node and its child nodes. Further, once a second child is added to the given parent node the :only-childselector rule is broken. We match against this selector and set display: noneto hide the given node.
这是如何执行此操作的演示。基本思想是加载时 CSS 将在加载该节点及其子节点时向 DOM 添加单个节点。此外，一旦将第二个孩子添加到给定的父节点，:only-child选择器规则就被破坏了。我们匹配这个选择器并设置display: none隐藏给定的节点。
<!doctype html>
<html>
<head>
<title>Hide content until loaded with CSS</title>
<style type="text/css" media="screen">
.hide-single-child > :only-child {
display: none;
}
</style>
</head>
<body>
<div class='hide-single-child'>
<div>
<h1>Content Hidden</h1>
<script>
alert('Note that content is hidden until you click "Ok".');
</script>
</div>
<div></div>
</div>
</body>
</html>
回答by drafiko
The best way to load javascript function over page is loaded, is
在页面上加载 javascript 函数的最佳方法是加载
$(window).bind("load", function() {
// code here
});
In your case
在你的情况下
div.hidden
{
display: none
}
<div id="extraControls" class="hidden">
</div>
$(window).bind("load", function() {
$("div#extraControls").removeClass("hidden");
});
回答by CharlesLeaf
What you could do is insert a inline scripttag at the end of the document, or immediately after the div with id "extraControls". Should be fire a little sooner than.
您可以做的是script在文档末尾插入一个内联标记，或者在 id 为“extraControls”的 div 之后立即插入。应该比火早一点。
<div id="extraControls">i want to be invisible!</div>
<script type="text/javascript">$("div#extraControls").hide()</script>
Of course you could do this server-side as well, but maybe there's a good reason you don't want to do that (like, have the controls visible if the browser does NOT support javascript).
当然，您也可以在服务器端执行此操作，但也许您有充分的理由不想这样做（例如，如果浏览器不支持 javascript，则让控件可见）。
