35

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)?

bta
  • 43,959
  • 6
  • 69
  • 99
Rana
  • 4,431
  • 9
  • 32
  • 39
  • 3
    I like being able to start reading a page before it has fully loaded, especially if I'm on a slow connection. – Matti Virkkunen Sep 02 '10 at 17:53
  • 6
    Probably not to the extent you're suggesting (including scripts), and I think this smells of bad design. Why do you want to do this? – tdammers Sep 02 '10 at 17:53
  • 2
    @tdammers why would it be a bad design? e.g. if the page is localized based on and the language gets changed in the JS while loading according to the browsers language, etc. then you see for a few ms the whole text in english and then it changes to the defined language. Another example having placeholders in textes that you must replace in JS, the same effect. – David Mar 21 '16 at 12:25

5 Answers5

56

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

#hideAll
 {
   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";
 </script>

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.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • 1
    since you are calling it by id, fix `.hideAll` to `#hideAll` – aularon Sep 02 '10 at 17:58
  • 8
    personally I think its time to cut-off ie6 support anyways.. such a hassle to work around – Jakub Sep 02 '10 at 18:51
  • It almost works for my case. I try to hide all html elements in a dojo test application, but it still display for a second a not yet formatted html element. But still, it still hold after all elements completed the loading process – swdev Nov 13 '11 at 04:31
  • Thank you very much Pekka. How do I name this page correctly ? "loading page" , "intro screen" ? or what ? – Accountant م Dec 02 '17 at 16:14
  • position: fixed; blocks scrolling. It is not necessary even. – Rohit Parte Aug 13 '19 at 06:02
8

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() {
    document.getElementById('loading-mask').style.display='none';
}

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

aularon
  • 11,042
  • 3
  • 36
  • 41
  • 1
    Also, this never displays the page at all if javascript is disabled... See @Pekka웃's answer for something slightly safer. – Tao Apr 06 '18 at 14:45
  • @Tao you can use modernizer for figuring out if brower is IE6 or javascript is disabled. – Dhaval Chheda Nov 08 '18 at 16:16
7

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

body {
    display: none;
}

$(function () {
    $('body').show();
}); // end ready

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

BlekStena
  • 345
  • 3
  • 13
5

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  {
        visibility:hidden;
     }
</style>

<script type="text/javascript">
    $(window).load(function () {
        $("#tabs").removeClass("hideAll");
    });
</script>

<div id="tabs" class="hideAll">
   ##Content##
</div>
JGilmartin
  • 8,683
  • 14
  • 66
  • 85
0

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..

Noddy Cha
  • 851
  • 1
  • 12
  • 19