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?

scunliffe · Accepted Answer · 2010-04-13 00:00:58Z

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"

edited Apr 13, 2010 at 0:00

answered Apr 12, 2010 at 23:55

scunliffe

63.8k26 gold badges132 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

coffeemonitor Over a year ago

Thanks scunliffe, I will be tweaking this, as I'm still new in the world of htaccess. But I've dabbled enough to know it's got advantages in many things.

Collectives™ on Stack Overflow

Preload Images with javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related