jQuery 在页面加载时隐藏 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9744760/
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
Hide a div while page is loading?
提问by Xhynk
So I've got one div that loads kind of funny, and my client is a little concerned about it, but I want to help them out.
所以我有一个 div 加载有点有趣，我的客户有点担心，但我想帮助他们。
Is there a way I can hide a div for a set time with jQuery? probably just opacity: 0 on page load, then 2 seconds in, change it to opacity: 1.
有没有办法可以使用 jQuery 在设定的时间内隐藏 div？可能只是页面加载时的 opacity: 0，然后 2 秒后，将其更改为 opacity: 1。
An alternative might be to add/remove class method. I'm just not sure what the code would be to have it in one state while the page loads, then in the other state indefinitely (unless the page is refreshed of course) so something like
另一种方法可能是添加/删除类方法。我只是不确定在页面加载时将它置于一种状态的代码是什么，然后无限期地处于另一种状态（当然除非页面被刷新）所以类似
jQuery('#DIV').WHILELOADING(function() {
jQuery('#DIV').addClass('hidden_div')
});
jQuery('#DIV').AFTER_2_SECONDS(function() {
jQuery('#DIV').removeClass('hidden_div')
});
I'm just not 'entirely' sure how to do this. As well, a "loading screen" which I know how to do, is out of the question, lol. :P
我只是不“完全”确定如何做到这一点。同样，我知道怎么做的“加载屏幕”也是不可能的，哈哈。:P
回答by mikevoermans
To avoid a flicker while loading, I'd recommend doing the initial hide with CSS
为避免加载时闪烁，我建议使用 CSS 进行初始隐藏
#div { display: none; }
Then to display the div use JS
然后显示div使用JS
function showDiv() {
$('#div').show();
}
setTimeout(showDiv, 2000);
回答by Selvakumar Arumugam
How is the div is being loaded, If it is page load then simply have the div hidden on page load and show the div inside
div 是如何加载的，如果是页面加载，那么只需在页面加载时隐藏 div 并在里面显示 div
jQuery(window).load (function () {
jQuery('#DIV').removeClass('hidden_div')
});
If you are loading the div using .load(ajax call) then used .load callback to show the div.
如果您使用.load（ajax 调用）加载 div，则使用 .load 回调来显示 div。
jQuery('#DIV').load('<URL>', function() {
jQuery('#DIV').removeClass('hidden_div')
});
Above two as assuming that you have the divhidden like below,
以上两个假设你有如下div隐藏，
<div id="DIV" class="hidden_div"><!-- div content --> </div>
Note:Adding delay may not give you a consistent result. For ex: If the delay is 5 sec and page take 10 secs to load then you going to have the same issue.
注意：添加延迟可能不会给您一致的结果。例如：如果延迟为 5 秒并且页面加载需要 10 秒，那么您将遇到同样的问题。
It's just loaded by PHP generated HTML, not jQuery. I am following the first comment, so something like this? "jQuery('#DIV').delay(1000).removeClass('hidden_div');"
它只是由 PHP 生成的 HTML 加载，而不是 jQuery。我正在关注第一条评论，所以是这样的？"jQuery('#DIV').delay(1000).removeClass('hidden_div');"
If it is php generated code then echo the removeClasscode at the end of the generating code.
如果是php生成的代码，则在生成代码removeClass的末尾回显代码。
回答by Anthony R
Initially you can hide it via jquery (or CSS but thats something most folks don't like doing) and then call the show method once the page is done loading You can try wrapping it in:
最初，您可以通过 jquery（或 CSS，但大多数人不喜欢这样做）隐藏它，然后在页面加载完成后调用 show 方法您可以尝试将其包装在：
$(document).ready(function(){
$("#DIV").hide();
}
and then towards the bottom of your page (though it doesn't matter where really):
然后到页面底部（尽管实际上在哪里并不重要）：
$(window).load(function(){
$("#DIV").show(); or .fadeIn();
});
回答by Michael Sparks
$(document).ready(function(){
$('#div')
.css({opacity:0}) /*set opacity to 0*/
.delay(2E0) /*wait 2 seconds*/
.animate({opacity:1}); /*animate in opacity*/
});
alternatively,
或者，
$(document).ready(function(){
$('#div')
.css({opacity:0}) /*set opacity to 0*/
//wait for body to load
$('body').bind('load', function(){
$('#div').animate({opacity:1}); /*animate in opacity*/
});
});
回答by MattInSD73
I would hide the div initially, then you can set a timer to remove the class or use .fadeTo to show it slowly (other finagling, not just swap to it, you also have to set opacity settings). But, in my personal opinion I think it may be that the page could use to be reworked to look right the first time or find some other non-clock oriented timing scheme to change the view after an even happens.
我最初会隐藏 div，然后您可以设置一个计时器来删除该类或使用 .fadeTo 缓慢显示它（其他 finagling，不仅仅是交换到它，您还必须设置不透明度设置）。但是，在我个人看来，我认为可能是该页面可以用来重新设计以使其第一次看起来正确，或者找到一些其他非面向时钟的计时方案来在偶数发生后改变视图。
Something like:
就像是：
<script type="text/javascript">
$(document).ready( function (){
setTimeout($('#DIV').removeClass('hide'), 3000);
});
</script>
<style type="text/css">
div#DIV .hide {
display: none !important;
}
</style>
[...]
<div id="DIV" class="hide"></div>
Syntax notverified.
语法未验证。
Cheers, ~M
干杯，〜M
回答by algi
First, set the content for non js users:
首先为非js用户设置内容：
<body class="no-js">
<div id="div">Content</div>
</body>
Then, remove class and show container.
然后，删除类并显示容器。
$(document).ready(function() {
// Remove no js class
$('body').removeClass('no-js');
// Show and animate div container
$('#div').hide().delay(2000).fadeIn();
});
回答by Jared
I'd use $(document).ready();to add you're css class and then $(window).load();to remove it.
我会$(document).ready();用来添加你的 css 类，然后$(window).load();将其删除。
$(document).ready(function(){
$('#DIV').addClass('hidden_div');
});
$(window).load(function(){
$('#DIV').removeClass('hidden_div');
});
?
?
回答by user1526836
All the methods here are not working, I tested them. Jquery is just too slow to hide something before the user can see it, because the code must be in a DOM ready function. Easiest best and fastest way: Put the element that needs to be hidden in a div and add a js in the top of this div to hide it during loding, this way is also safe for users without js enabled! (tested in ie, chrome, ff, latest version 05.2013):
这里的所有方法都不起作用，我测试了它们。Jquery 太慢而无法在用户看到之前隐藏它，因为代码必须在 DOM 就绪函数中。最简单最好最快的方法：把需要隐藏的元素放在一个div中，在这个div的顶部添加一个js，在加载时隐藏它，这种方式对于没有启用js的用户也是安全的！（在 ie、chrome、ff、最新版本 05.2013 中测试）：
Example to hide a div:
隐藏 div 的示例：
<div id="content">
<script type="text/javascript">
// Get the div and hide it
var div = document.getElementById('content');
div.style.display = 'none';
//Shows the div as soon as the page is loaded
window.onload = function () {
div.style.display = 'block';}
</script>
// Content that needs to be hidden
</div>
Cheers
干杯
回答by Duncan Gravill
Why not set the display property of the div inline to 'none' and then when the document has loaded show the div?
为什么不将内联 div 的显示属性设置为“无”，然后在加载文档时显示 div？
<div id="mydiv" style="display:none;"> </div>
$(document).ready(function() {
$('#mydiv').show();
});
回答by DG3
this code is from jquery api website on delay()
此代码来自 jquery api 网站上的delay()
$('#myDiv').slideUp(300).delay(800).fadeIn(400);
jsfiddle: http://jsfiddle.net/NNQ4f/
jsfiddle：http: //jsfiddle.net/NNQ4f/
