Preload Images with javascript

Question

Here is my preload script:

<script type="text/javascript"> 
Image_1 = new Image(1,1);
Image_1.src = "images/sprites.png";
</script>

And it works fine. I can see in the headers the image loading.

Here's my question. Even though I have preloaded sprites.png, I notice that when I go to a page on my site that simply displays that entire image, the headers tell me my browser is requesting the server to send the image again.

I'm hoping to not sound too naive. But, why would the browser request the image when I preloaded it earlier? Are there other reasons the browser would need to re-request?

Also, I put the dimensions as Image(1,1). Sometimes I don't know the dimensions, as that image gets updated from time to time. Maybe that's a reason?

Answer 1

You need to send an Expires header with the image from the server to enable caching in the browser.

e.g. in Apache (in .htaccess)

enable expires:

ExpiresActive On

by date:

ExpiresDefault "access plus 30 days"

or by filetype:

ExpiresByType image/gif "modification plus 5 hours 3 minutes"