CODEWITHSUNDEEP
javascripthtmldom
Artem
Artem

Reputation: 65

JavaScript question

It is possible not to show html page in user browser until some JavaScript(built-in or in separate file) will be loaded and executed(for page DOM manipulation)?

Upvotes: 1

Views: 205

Answers (6)

Brandon Langlois
Brandon Langlois

Reputation: 71

All You really need to do is give your element an ID or CLASS and use the dislay: none; property. When your ready to show it just delete it.

CSS:

#div_1 {
            display: none;
        }

HTML:

<div id="div_1">
        <p>This will be the hidden DIV element until you choose to display it.</p>
        <p id="js_1"></p>
        <script>
            var x = "Some Test ";
            var y = "Javascript";
            document.getElementById("js_1").innerHTML = x + y;    
        </script>
    </div>

Upvotes: -1

Rajib Banerjee
Rajib Banerjee

Reputation: 81

My understanding is that you want to run some javascript code before you load the page. In the js file you write your init function and add the eventlistener to the window on "load" event. This will ensure that the init code gets executed first and then you can start displaying the HTML content.

var Yourdomain = {};
YourDomain.initPage = function(){
 /* Your init code goes here*/
}

window.addEventListener("load", YourDomain.initPage, false);

Upvotes: 0

Oxyrubber
Oxyrubber

Reputation: 171

Examples of what you might want to do:

  1. Facebook's "BigPipe": http://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919 This method allows you to load JS first then ASYNC+inject all DOM content.
  2. GMail
  3. Zimbra (open-source web app similar to MS Outlook/Exchange)

Upvotes: 1

Sakhawat Ali
Sakhawat Ali

Reputation: 405

Place the content of HTML page in a DIV, make its diplay none and on load of body diplay it. 

<script type="text/javascript">

function showContent() { 
var divBody=document.getElementById('divBody');
divBody.style.display= 'block';
} 
</script> 
<body onload="showContent()"> 
<div id="divBody" style="display: none;">
 <--HTML of the page--> 
</div>  
</body>

Upvotes: 1

thomasmalt
thomasmalt

Reputation: 1752

The easiest thing to do is to set the css variable

display: none;

to the whole page. then when everything is loaded you can set the display to 

display: block; // or something else that suits.

If you make sure that piece of CSS is loaded at the very start of your document it will be active before any html is shown.

if you use a javascript library like jQuery you'll have access to the $(document).ready() function, and can implement a switch over like this:

<html>
    <head>
        <title>test</title>
        <style type="text/css">
            body > div {
                display: none;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function() {
                $('body > div').css('display', 'block');
            });
    </head>
    <body>
        <div>
            This will initially be hidden.
        </div>
    </body>
</html>

Upvotes: 4

Andrzej Doyle
Andrzej Doyle

Reputation: 103777

Not in the classical way you'd distribute a page. Browsers will (usually) start to display chunks of the base HTML file as it arrives.

Of course, you could simulate this by generating all the HTML on the fly from some included Javascript file. But that doesn't sound like a good plan as it will degrade horribly for people without JS enabled, or if you have a minor bug in your script. A better option might be to style the body tag to display: none and restyle it from the script to make certain parts visible again.

What is it you're actually trying to achieve? It sounds like there's likely to be a better way to do this...

Upvotes: 3

Related Questions