Is it possible to know if a file is inside the user's browser cache?

Question

I am doing something like this: if an image is cached on user's computer and its timestamp is the same as the one on the server, then display the cached version; otherwise, do NOT load the image from the server.

I guess maybe JavaScript can do this, so I tagged this post as javascript. If it is improper, please help me to re-tag it.

Edit: Here I give more details about what I am going to implement. I am working on something like a web-based file explorer, where thumbnails are loaded only if the user click on a "view thumbnail" button beside each image. If a thumbnail is already cached, use the cached version; otherwise, show a generic image icon.

Answer 1

This isn't something you have to worry about. The browser does this automatically for you. You do have to make sure that the server is sending the right headers. It does help to have proper cache settings on the files to avoid the additional HEAD request.

Answer 2

Could you approach this from a different direction and use cookies and PHP instead?

Answer 3

Couldn't you just move/delete/rename it on the server? And then handle the broken image with a javascript Image.onError to hide the broken image tag for the people that don't have the cached image.

I think that would show cached version for those whohave it in their broswer chache. The rest of the people will not se anything

Answer 4

A browser can send the "If-Modified-Since" and "ETag" headers to indicate to the server that it does have a version of a resource. Check the W3 caching rules regarding these headers.

You could query for those headers on the server, sending back the generic icon if not found, and a "304 Not Modified" response if found.

Answer 5

This seems a bit odd to me.

You describe your functionality as showing a list of files and giving the user the option to click "view thumbnail". This means it will only attempt to load the image from the server if the user specifically requests the image - so you have already stopped the potential for a mass-load of a large number of images.

So if the image isn't in my browser cache, which on my first visit none will be, then I will get the generic image icon. On my next visit, the image still won't be in my cache so I will get the generic image icon again. So how will I ever see anything except the generic image icon?

Now onto a solution, which I admit doesn't meet your requirements, but this is a typical implementation for this type of software.

1. Show the files with a "show thumbnail" option
2. When the "show thumbnail" option is selected, load the thumbnail from the server (note that quite often a script will serve a resized image, which may also be stored on the server to avoid having to process the resize again for a certain amount of time)
3. The browser will automatically cache the image and prevent further server requests for a time

Answer 6

My RSS reader, for feeds that have a lot of posts, loads a full page of posts. The number of entries is dependent on the size of the actual window. When I scroll to the bottom of the list, if there are more posts it will load another page.

Would that be applicable to your file explorer? It would mean that a user would always load twenty thumbnails but never any more unless it's necessary. I've never used a file explorer that required me to click to view a thumbnail.