CSS, jQuery

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

10 Comments

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

    Reply

    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

      Reply

  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

    Reply

Leave a reply to Shon Gale Cancel reply

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