Question

I saw a PPT from steve souders about loading images before the css for a similar situation that i need…. but im not clear on what the actual code is to do this. I assume he loaded something before the css and in his ppt he says this

new Image().src = "http://webcelerity.com/blog/wp-content/themes/carrington-blog-faster/images/sprite.png

but it would be awesome if someone can show me what the doc head would actually look like

for ref; here is the ppt

thanks for your help in advance

Answer 1

The method of preloading images has been around for ages, first time I had seen it was when I used Dreamweaver MX to do rollover effects.

Using that method you can parallelize download of the images and cache them in the browser (without the need of actually displaying them at that moment).

Regarding your question, the head of the document would look something like:

<script type="text/javascript">
var images = ['img1.jpg', 'img2.jpg'];

for(var i = 0, len = images.length; i < len; i++) {
  new Image().src = images[i];
}
</script>
<link rel="stylesheet" type="text/css" href="your_css_file.css" />