使用 Jquery 在加载时显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21131378/
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
Show a div on load using Jquery
提问by Magesh Kumaar
I have these 2 div's !
我有这两个 div！
<div id="loader">
</div>
and
和
<div id="wrapper">
</div>
"The wrapper div is not inside the loader div for any clarification"
“包装器 div 不在加载器 div 内以进行任何说明”
My script
我的剧本
$(window).bind("load",function() {
$('#loader').css('display',none);
$('#wrapper').css('visibility',visible);
});
What I intend to do with the script is to hide the loader div after the page has been completely loaded and display the wrapper div which contains all the contents of the page.
I initially set display:nonein the wrapper style.
我打算对脚本做的是在页面完全加载后隐藏加载器 div 并显示包含页面所有内容的包装器 div。我最初设置display:none为包装样式。
As I expected the loader div is displayed but after the loading has been completed (which I can tell at least from the loading icon of the mouse and the faviconregion of the browser tab) but the wrapper div is not shown .
正如我所料，加载器 div 会显示，但在加载完成后（我至少可以从鼠标的加载图标和favicon浏览器选项卡的区域中看出这一点），但未显示包装器 div。
Any help would be nice.
你能帮忙的话，我会很高兴。
回答by Hasib Hasan Arnab
You should use the $(document).ready()to load the page completely.
您应该使用$(document).ready()来完全加载页面。
The following code may help you...
以下代码可能会帮助您...
$(document).ready(function(){
$('#loader').css('display','none');
$('#wrapper').css('display','block');
});
回答by Hüseyin BABAL
Use this;
用这个;
$(document).ready(function() {
$('#loader').hide();
$('#wrapper').show();
});
or
或者
$(document).ready(function() {
$('#loader').css('display','none');
$('#wrapper').css('visibility','visible');
});
Working fiddle: http://jsfiddle.net/33zch/
工作小提琴：http: //jsfiddle.net/33zch/
回答by Roman Izosimov
In some browsers, like Firefox, event $(window).load()apperas only after successfully loading all elements (images, for example), but in Chrome $(window).load()and $(document).ready()fired in same time. Using $(window).load()have potential issue in firefox (maybe in another browsers too): if at least one image on the page is loaded with error then event not occure. And use right syntax:
在某些浏览器中，例如 Firefox，事件$(window).load()仅在成功加载所有元素（例如图像）后才会出现，但在 Chrome 中$(window).load()并同时$(document).ready()触发。$(window).load()在 Firefox 中使用有潜在问题（也可能在其他浏览器中）：如果页面上至少有一个图像加载错误，则不会发生事件。并使用正确的语法：
$('#loader').css('display','none');
$('#wrapper').css('display','block');
or
或者
$('#loader').hide();
$('#wrapper').show();
回答by Anup
It should be like this :-
应该是这样的：-
$('#loader').css('display','none');
$('#wrapper').css('visibility','visible');
回答by Bharat soni
You can use with this simple way.
您可以使用这种简单的方法。
window.onload = $('#loader').hide();
window.onload = $('#wrapper').show();
回答by Surjith S M
You told that you have initially set wrapperelement to display:none;Then how it will be visible by adding visibility:visible? Instead you should add display:blockto get this working.
您告诉过您最初已将wrapper元素设置为display:none;那么如何通过添加来显示它visibility:visible？相反，您应该添加display:block以使其正常工作。
