Preloading images with javascript
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 great. I see image loading in headers.
Here's my question. Even though I pre-loaded sprites.png, I noticed that when I go to a page on my site that just displays this whole image, the headers tell me that my browser is asking the server to send the image again.
I hope not to sound too naive. But why is the browser asking for the image when I preloaded it before? Are there any other reasons why the browser would need to re-request?
Also, I put the dimensions as Image (1,1). Sometimes I don’t know the dimensions as this image is updated from time to time. Maybe the reason?
source to share
You need to send an Expires header with an image from the server to enable caching in the browser.
eg. in Apache (in .htaccess)
enable expires:
ExpiresActive On
by date:
ExpiresDefault "access plus 30 days"
or by file type:
ExpiresByType image/gif "modification plus 5 hours 3 minutes"
source to share