Question

请考虑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：可能是非常愚蠢的事情，但我不明白。

Answer 1

在css中写display:none;而不是可见性

详细了解Here

之间的差异

有关说明：

display：none表示相关标签不会出现在   页面（尽管你仍然可以通过dom与它互动）。   其他标签之间不会为它分配空间。

visibility：hidden意味着与display：none不同，标签不是   可见，但在页面上为其分配了空间。标签是   渲染，它只是在页面上看不到。

Answer 2

您的内容visibility: hidden应为display: none，并且不需要onload中的第二行JS，请参阅此处：

http://plnkr.co/edit/MHbBjuCEVrIGpKarooLF

Answer 3

根据jQuery，(...)This is roughly equivalent to calling .css( "display", "block")

所以，这个函数不会改变css属性'visibility'

Answer 4

您需要将visibility:hidden更改为display:none并删除第二行JS（您运行相同的代码2次）。

 $('#content').show();

此代码将css添加到#content元素display:block而不是visibility:visible。如果您想使用visibility:hidden样式，则必须将代码更改为

$('#content').css('visibility','visible');

为什么jquery show（）在示例中不起作用

4 个答案: