如何隐藏网站内容直到完全加载？

Question

我试过这个：

JS：

window.onload = function() {
   document.getElementById("konteineris").style.visibility = "display";
};

CSS：

.konteineris {
   visibility:hidden;
}

问题是浏览器根本不加载内容。它加载了所有内容 - 一些 iframe，仅此而已。

网站：http://mamgrow.lt/

有什么问题吗？

Answer 1

您应该将类选择器

.konteineris

更改为ID选择器

#konteineris

：

#konteineris {
   visibility:hidden;
}

并在 html 中将

<div class="konteineris">

更改为

<div id="konteineris">

或者你只需要将 JS 更改为：

window.onload = function() {
   document.getElementsByClassName("konteineris")[ 0 ].style.visibility = "display";
};

此外，

display

CSS 属性中没有

visibility

值。所以应该是：

window.onload = function() {
   document.getElementsByClassName("konteineris")[ 0 ].style.visibility = "visible";
};

Answer 2

CSS3 淡入

这是使用现代 css3 关键帧功能的示例。

CSS

body{
  opacity:0;
}
body.show{
  -webkit-animation:fadeIn 5s ease;
  opacity:1;
}
@-webkit-keyframes fadeIn{
    0%{opacity:0;}
    100%{opacity:1;}
}

要添加更多支持，您需要手动添加各种前缀

-webkit -ms -moz -o ....

JS

window.onload=function(){
 document.body.className='show';
}

顺便说一句，在这种情况下，我认为 javascript 部分不是必需的，因为创建元素时会应用 css 样式。所以基本上下一个代码应该足够了。

body{
  -webkit-animation:fadeIn 5s ease;
  opacity:1;
}
@-webkit-keyframes fadeIn{
    0%{opacity:0;}
    100%{opacity:1;}
}

演示

http://jsfiddle.net/ZHKUA/1/