How to control or prevent rendering of HTML page till it download all resource file?

266 Views Asked by Ashish Agarwal At 25 April 2025 at 14:07

How to control rendering of HTML page till it download its all HTML, CSS and JS dependencies?

Adding to the above question, how to validate that all the dependencies have been downloaded successfully ?

FRAMEWORK I AM USING:- jQuery, Twitter Bootstarp

Browser compatibility required:- IE8+, Chrome, Firefox, Safari

There are 1 best solutions below

Blender On 04 June 2012 at 04:56 BEST ANSWER

This might work. Basically, you hide the body by default. When everything loads, you show it:

HTML:

<body class="placeholder">
  ...
</body>

CSS:

.placeholder {
  display: none;
}

JavaScript:

$(document).load(function() {
  $('body').removeClass('placeholder');
});

Just as a question: why would you need to do this?