请考虑这个Plunk .它的目的是提供一个非常简单的加载机制模拟。
我有一个简单的设置:
<body>
<div id="loading">
<img src="http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif"/>
</div>
<div id="content">
<h3>Content fully loaded.</h3>
</div>
</body>
通过 CSS 隐藏 content 的地方:
body
{
width: 100%;
height: 100%;
}
#loading {
position: absolute;
top: 0;
width: 100%;
height: 100%;
text-align: center;
}
#content {
position: absolute;
top: 0;
width: 100%;
height: 100%;
visibility: hidden;
}
Javascript 同样简单:
$(window).ready(function()
{
simulateLongLoad();
$('#content').show();
});
function simulateLongLoad()
{
setTimeout(showContent, 2000);
}
function showContent()
{
$('#loading').hide();
$('#content').show();
}
但是，由于某些原因，#content 的 .show() 不起作用。知道为什么吗？
PS:可能是非常愚蠢的东西，但我没看到。
最佳答案
在 css 中写 display:none; 而不是 visibility
通过 Here 阅读更多关于差异的信息
解释:
display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.
visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.
但是如果你想使用 visibility ，并且想使用 JQuery 显示/隐藏，那么使用下面
$('#element').css('visibility', 'visible'); //to show
$('#element').css('visibility', 'hidden'); //to hide
关于javascript - 为什么 jquery show() 在示例中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34744105/