CSS & jQuery – Hide the HTML page until the Javascript & CSS styles are completely loaded

It always takes some times for the browser to apply the CSS styles on the rendering page. Therefore, users may observe a style leap before the page is completely loaded. We could fix this problem by hiding the body anchor until the Javascript and CSS are loaded.

First, set the visibility of the body anchor to hidden.

body {
  visibility: hidden;
}

 

Add the following piece of code to your Javascript file.

jQuery(document).ready(function(){
  /* Show the HTML page only after the js and css are completely loaded */
  delayShow();
});

function delayShow() {
  var secs = 1000;
  setTimeout('jQuery("body").css("visibility","visible");', secs);
}

 

Done =)

10 thoughts on “CSS & jQuery – Hide the HTML page until the Javascript & CSS styles are completely loaded”

  1. Sweet! Thanks for this! I’ve been looking for such code for weeks and haven’t been able to figure out something that had worked out for me.

    Nevertheless, I think would be cool if one could add a fadeIn effect after the display of content. Since I’m still new relatively to jQuery I was trying something like this, but didn’t work:

    		jQuery(document).ready(function(){
    		  delay();
    		  fadeIn();
    		});
    		
    		function delay() {
    		  var secs = 1000;
    		  setTimeout('jQuery("body").css("visibility","visible");', secs);
    		}
    
    		function fadeIn() {
    		  var secs = 2000;
    		  setTimeout('jQuery("body");', secs);
    		}
    

    Any ideas?

    Like

    1. try this

      jQuery(document).ready(function(){
        delay();
      });
      
      function delay() {
        var secs = 1000;
        setTimeout('initFadeIn()', secs);
      }
      
      function initFadeIn() {
        jQuery("body").css("visibility","visible");
        jQuery("body").css("display","none");
        jQuery("body").fadeIn(5000);
      }
      

       

      Reference: jQuery API – fadeIn()

      Like

  2. OMG Thank you so much! You can go ahead and look on my site, I applied this and looks great 🙂

    Just a correction in your coding in the “display”,”node”, should be “display”,”none”.

    jQuery(document).ready(function(){
      delay();
    });
    
    function delay() {
      var secs = 1000;
      setTimeout('initFadeIn()', secs);
    }
    
    function initFadeIn() {
      jQuery("body").css("visibility","visible");
      jQuery("body").css("display","node");
      jQuery("body").fadeIn(5000);
    }
    

    Happy coding!!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.