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)?
+1
A:
You can of course mask the entire page until you're ready with a load mask:
Lloyd
2010-10-08 09:07:01
+3
A:
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...
Andrzej Doyle
2010-10-08 09:08:47
Just trying to add some CSS tags, manipulate DOM and don't want users to see "jumps"
Artem
2010-10-08 09:52:31
+1
A:
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>
thomasmalt
2010-10-08 09:10:34
+1
A:
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>
Sakhawat Ali
2010-10-08 09:21:18
+1
A:
Examples of what you might want to do:
- 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.
- GMail
- Zimbra (open-source web app similar to MS Outlook/Exchange)
Oxyrubber
2010-10-08 10:01:20