Question

There are a lot of pre-load script examples available on stack overflow but is there a way to check if the browser already has the image preloaded in it’s cache and if it is then do not initiate/overtake the image pre-loading with the .load() function and just let the browser put in the image?

Answer 1

I don’t think so, but more importantly if your browser already has the image, it won’t try to reload it anyways (it will just ask the server for the headers and see that the image hasn’t changed).

If you want, you can put ‘far futures expires’ headers on the images, so the browser doesn’t even try to check the server and just assumes any images it has in its cache are okay. This would effectively do what you asked.

I think Yahoo says it better than I can:

Browsers (and proxies) use a cache to reduce the number and size of
HTTP requests, making web pages load faster. A web server uses the
Expires header in the HTTP response to tell the client how long a
component can be cached. This is a far future Expires header, telling
the browser that this response won’t be stale until April 15, 2010.
Expires: Thu, 15 Apr 2010 20:00:00 GMT

If your server is Apache, use the ExpiresDefault directive to set an
expiration date relative to the current date. This example of the
ExpiresDefault directive sets the Expires date 10 years out from the
time of the request.
ExpiresDefault “access plus 10 years”

Keep in mind, if you use a far future Expires header you have to
change the component’s filename whenever the component changes. At
Yahoo! we often make this step part of the build process: a version
number is embedded in the component’s filename, for example,
yahoo_2.0.6.js.

So basically, you can put the header Expires: Thu, 31 Dec 2030 0:00:00 GMT and the browser won’t go looking for the image again for another 29 years or so : ). Of course this means if you change the images, you’ll have to rename them.