Question

This may seem like a basic question.

I have a light-weight website and would like to load the whole page at once, so that links to the Home/Contact/… parts of the website will take no time to load.

What would be the best mechanism to implement this?

Answer 1

I have setup a basic jsfiddle to show how this can be achieved with jquery

http://jsfiddle.net/9DMBq/

Basically I created this kind of context with html and css:

the css:

<style>
#container { height: 200px; width: 400px; background-color: #CCC; }
h3 { font-size: 20px; padding:5px; }

.button {cursor: pointer; padding:10px; background-color: #EEE; margin:5px;}

.content { position: absolute; width: 400px; height: 100px; background-color: #FFF}
​</style>

the html:

<div id="container">
<span id="homenav" class="button">Home</span>
<span id="aboutnav" class="button">About</span>
<br>
</br>
<div id="home" class="content">
    <h3>home</h3>
</div>
<div id="about" class="content" style="display: none;">
    <h3>about</h3>
</div>
</div>

and then I added some Jquery to make it work:

$('.button').click(function() {

    var whereto = $(this).attr("id").replace('nav', '')

    $('.content').fadeOut(function() {
        $('#' + whereto).fadeIn()
    })
})​

I hope this solves your problem although there are many other ways to do this.

​

I originally thought you were referring to having the page only show once all the content had finished loading, however i’ll leave this here just incase;

This can be accomplished super easy with jquery with the following code

make sure to reference jquery in the header with :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

and then stick the following in the head of your html

<script>
    $('html').hide();

    $(document).ready(function() {
        $('html').show();
    });
</script>