mage Preloading
CSS Tip: Preloading Images With CSS
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"/>
Search
All Categories
- Artwork (3)
- Entertainment (4)
- Food | Recipes (2)
- GollyGolly (14)
- Have to Have (4)
- Inspiration (4)
- Interesting (6)
- News (9)
- Online Amusement (11)
- Photos (11)
- Questions | Survey (2)
- Quotes (24)
- Snippets | Code (4)
- Tweet (37)
- Uncategorized (1)
- Wordpress (2)
All Tags
A animals art birthday celebrities Christmas code Colorado creative css decor excerpt experiment family flash flowers highslide holidays humor Inspiration J lists movies News obsessed parenting photoshop ponder sad scan shopping sleep updates webjunk work




