First, let's create a class with display set to none and add it to the HEAD section of the home page:

<style type="text/css">
.hiddenPic {display:none;}
</style>

Next, we'll add image tags for our puppy pictures to the bottom of the home page. Always place them at the bottom of the page! If the visitor is at the home page, you certainly want it to display as quickly as possible. Let the browser display the home page and its images before it starts trying to retrieve the images for the next page.

<img src="poodle-puppy-Clara.jpg" 
 alt="Clara at 8 weeks" title="Clara at 8 weeks" 
 height="350" width="350" class="hiddenPic">

<img src="poodle-puppy-Kenny.jpg"
 alt="Kenny at 10 weeks" title="Kenny at 10 weeks"
 height="350" width="350" class="hiddenPic">

<img src="poodle-puppy-Aiko.jpg" 
 alt="Aiko at 6 weeks" title="Aiko at 6 weeks"
 height="350" width="350" class="hiddenPic">

Note that we used the "hidden" class name for each image. Again, the browser will request the image files and save them locally, but will not display them on the home page as long as the DISPLAY property is set to none. Don't use that class for every image on your home page or none will display!

You also don't have to preload every image on the puppy page. If several attractive, important images load immediately, visitors have something to look at while they wait for the others to load. The important thing is to avoid making visitors stare at a blank page!