Home » Html » display HTML page after loading complete

display HTML page after loading complete

Posted by: admin November 30, 2017 Leave a comment


Is there a way to force the browser to display a page only after all of the page’s contents are completely loaded (such as images, scripts, css, etc)?


The easiest thing to do is putting a div with the following CSS in the body:

   position: fixed;
   left: 0px; 
   right: 0px; 
   top: 0px; 
   bottom: 0px; 
   background-color: white;
   z-index: 99; /* Higher than anything else in the document */


(Note that position: fixed won’t work in IE6 – I know of no sure-fire way of doing this in that browser)

Add the DIV like so (directly after the opening body tag):

<div style="display: none" id="hideAll">&nbsp;</div>

show the DIV directly after :

 <script type="text/javascript">
   document.getElementById("hideAll").style.display = "block";

and hide it onload:

 window.onload = function() 
  { document.getElementById("hideAll").style.display = "none"; }

or using jQuery

 $(window).load(function() {  document.getElementById("hideAll").style.display = "none"; });

this approach has the advantage that it will also work for clients who have JavaScript turned off. It shouldn’t cause any flickering or other side-effects, but not having tested it, I can’t entirely guarantee it for every browser out there.


put an overlay on the page

#loading-mask {
    background-color: white;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;

and then delete that element in a window.onload handler or, hide it

window.onload=function() {

Of course you should use your javascript library (jquery,prototype..) specific onload handler if you are using a library.


Hide the body initially, and then show it with jQuery after it has loaded.

body {
    display: none;

$(function () {
}); // end ready

Also, it would be best to have $('body').show(); as the last line in your last and main .js file.


you can also go for this…. this will only show the HTML section once javascript has loaded.

<!-- Adds the hidden style and removes it when javascript has loaded -->
<style type="text/css">
    .hideAll  {

<script type="text/javascript">
    $(window).load(function () {

<div id="tabs" class="hideAll">


try using javascript for this!
Seems like its the best and easiest way to do this.
You’ll get inbuilt funcn to execute a html code only after HTML page loads completely.

or else you may use state based programming where an event occurs at a particular state of the browser..

Leave a Reply

Your email address will not be published. Required fields are marked *