Forum Moderators: not2easy
I would be interested to know whether something can be done to prevent a website been displayed prior all its contents are fully loaded. A good demonstration of that (although I have come across several websites that behave in this way) is the World Wide Web consortium website. Whenever I open their homepage, no matter how fast or slow my connection is (I used DSL and 56K modem to test it) their website is displayed all at once. Depending on the speed, it might take a few seconds to load, but my point is that I don’t see the background elements been allocated and positioned. The final layout of the website is presented without watching the divs being floated in position according to the design. Of course the w3 homepage hardly has any images in it and its made purely from divs and flawless CSS. They also probably have really fast servers. But despite all that it shouldn’t be the only reason. I created a test layout with no more than 8 to 10 divs, links, no images expect for a few background images which I repeated x-y in order to fill the divs (faux cols) make the layout presentable (each of these tiles were not exceeding 3-5kb). Despite the small size of the test page and despite having placed it on a relatively fast server, I could watch the layout been aligned into position and it doesn’t look good when someone sees that. Is there any way to mitigate this? Is there any way to have the page been displayed only once its finished being loaded? I hope my query doesn’t sound too silly; it is just I could find something about fixing that.
Thanks in advance.
<html>
<head>
<title>Div one</title>
<div id="divOne" style= "visibility:hidden;"
<p>This is div one</p>
</div>
<script language=javascript>
function showDiv()
{document.all.divOne.style.visibility='visible';}
</script>
</head>
<body onload="showDiv()">
</body>
</html>
onload="showDiv()" tells the browser/computer to wait untill all elements of the page have loaded and then after that execute a command. In this example the command is showDiv() which calls the function that changes the div visibility from hidden to visible.
It worked for me.
Thank you so much for that. I will give it a go. Do I need to do it for every div in the page, or just the wrapper?
Thanks again.
Didn't have a chance to test that yet, but a quick question: I noticed that you used the JS within the head. Is that what you meant or should it be like:
------------------------------------
<html>
<head>
<title>Div one</title>
<style type="text/css">
#divOne {style= "visibility:hidden;}
</style>
</head>
<body onload="showDiv()">
<script language=javascript>
function showDiv()
{document.all.divOne.style.visibility='visible';}
</script>
<div id="divOne">
<p>This is div one</p>
</div>
</body>
</html>
------------------------------------
Sorry if I sounded too judgemental I just wasn't sure about the syntax.
Regards.
