display HTML page after loading complete

by

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.

More Related Contents:

  1. How to force browser to show image 3 inches wide?
  2. How can I tell if a DOM element is visible in the current viewport?
  3. Communication between tabs or windows
  4. Disabling browser print options (headers, footers, margins) from page?
  5. Appending HTML string to the DOM
  6. How to programmatically empty browser cache?
  7. How to open a PDF file in an ?
  8. Browser/HTML Force download of image from src=”data:image/jpeg;base64…”
  9. Detecting if a browser is using Private Browsing mode
  10. How to detect when a page exits fullscreen?
  11. Onclick javascript to make browser go back to previous page?
  12. Why should y.innerHTML = x.innerHTML; be avoided?
  13. How can I retain the scroll position of a scrollable area when pressing back button?
  14. Target=’_blank’ to show in new window, NOT new tab, possible?
  15. Detect if browser is running on an Android or iOS device
  16. wget + JavaScript?
  17. Browser back button handling
  18. Setting minimum size limit for a window minimization of browser?
  19. Why does JavaScript navigator.appName return Netscape for Safari, Firefox and Chrome?
  20. Force page zoom at 100% with JS
  21. How to trigger CSS “hover state” using Javascript? [duplicate]
  22. Web browser: Hide mouse cursor [duplicate]
  23. Open Gmail on mailto: action
  24. Browsers automatically evaluate hex or hsl colors to rgb when setting via element.style.background?
  25. Could a website force the browser to go into fullscreen mode?
  26. How to reduce the length of a video using JavaScript? [closed]
  27. HTML5 Video autoplay with sound unmuted
  28. How do I dynamically adjust css stylesheet based on browser width?
  29. Is it possible to disable Ctrl + F of find in page?
  30. Checking if a textbox is empty in Javascript

Leave a Comment