How to hide website content until it's fully loaded?

Question

I tried this:

JS:

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

CSS:

.konteineris {
   visibility:hidden;
}

And the thing is that browser doesn't load content at all. All it loads - some iframes and that's all.

Website: http://mamgrow.lt/

Any ideas what's wrong?

Answer 1

You should change class selector .konteineris to ID selector #konteineris:

#konteineris {
   visibility:hidden;
}

and in html change <div class="konteineris"> to <div id="konteineris">

Or you need just change your JS to:

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

Also there is no display value in visibility CSS property. So should be:

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

Answer 2

CSS3 fadeIn

Here is an example using the modern css3 keyframes feature.

CSS

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

to add more support you need to manually add the various prefixes

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

JS

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

btw in this case i think the javascript part isn't necessary as the css style applies when the element is created. so basically the next code should be enough.

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

DEMO

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

if you have any questions just ask.