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/

如果您有任何问题，请询问。

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

2 个答案: