javascripthtmlcssloadhidden

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

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?

Solution

  • 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";
};