About design and nearby

Preload Images with CSS

Posted: March 14th, 2010 | Author: | Filed under: Tips and Tricks | Tags: , | No Comments »

When I have been working at one web site, I’ve got a trouble: some images (buttons) were loading too slow. I find that I have to speed up page display and deside to fix this using CSS – yes, you don’t need to paste JavaScript to preload your images.

First I create a class with display set ‘none’ at the ‘head’ section (or sure! you can place this class at stylesheet.css):

  1. .hiddenPic {display:none;}

And the ‘body’ section:
My buttons (menu):

  1. <div><a href="about.html"><img src="images/image1.jpg" /></a></div>
  2. <div><a href="gallery.html"><img src="images/image2.jpg" /></a></div>
  3. <div><a href="publication.html"><img src="images/image3.jpg" /></a></div>
  4. <div><a href="events.html"><img src="images/image4.jpg" /></a></div>
  5. <div><a href="contact.html"><img src="images/image5.jpg" /></a></div>

I add image tags for my pictures to the bottom of the home page (to the bottom of the page – before </body> – to display as soon as possible, prior to the browser starts to open the next page; then you can reference to the images anywhere and the images will load from browser cache memory):

  1. <img src="images/image1.jpg" height="128" width="36" class="hiddenPic">
  2. <img src="images/image2.jpg" height="128" width="36" class="hiddenPic">
  3. <img src="images/image3.jpg" height="128" width="36" class="hiddenPic">
  4. <img src="images/image4.jpg" height="128" width="36" class="hiddenPic">
  5. <img src="images/image5.jpg" height="128" width="36" class="hiddenPic">

(Note: the height and width attributes can help a little with speed, so I use them).
And it’s working!

Share Button

Check Related Posts:


Leave a Reply


  • five × = 15

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now