6

I am using a JavaScript script that tells me if specific image URLs are cached in the user's browser cache. I'm using this because I build an array of non cached images that will be loaded separately, after more important process is done. This script is wrote specifically for Google Chrome so I don't need a cross-browser solution.

My current function checks the time spent loading the image and if it is less than a few milliseconds (currently 25ms), I assume it is pulled from cache.

The difference between cached and not cached images is easy to spot manually by checking the Resources Panel in Chrome's Developers Tool. When hovering the loading time, Chrome tells if file was pulled from cache or not by printing a tool-tip looking like this: xx ms Latency, xx ms Download (from cache).

I noticed that on some occasions, the Latency time is quite long (e.g. 64ms for only 2ms downloading time) and makes my detect function useless as the total loading time then exceeds my threshold. Increasing the threshold is not possible as small and not cached images could also be loaded in the same amount of time.

Now that you got my problem, here goes my question:

-Is it possible to check in a 100% accurate way (e.g. like chrome's resources panel) that file comes from cache ? (I guess if that panel does it, there has to be a way but I couldn't find it on the Internet)

Or

-Is there a way to separate the two delays (i.e. Latency vs. Download) to be able to check only the true downloading time ? Calculating time spent between starting the load of the image and the onload event returns the total amount of time.

I thank you for reading my question and even if you don't have a precise solution, thoughts, ideas, are most welcome !

(PS: I am not a native english speaker so please don't blame me for doing mistakes !)

Gaël

Gaël
  • 63
  • 1
  • 3

2 Answers2

1

You need to examine the HTTP headers when the image is served up to be 100% sure. Unfortunately JavaScript doesn't have access to this data.

See: Accessing the web page's HTTP Headers in JavaScript

Community
  • 1
  • 1
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • Thanks for answering :) However, I am using only cacheable images so as long as the user viewed it before it will be served from cache. What I want to separate is images the user already viewed and images he has not viewed yet. Let's say I have two images. One is in the browser cache, the other is not. I want to be able to differentiate those two :) (If you said what you said because headers tell if file is coming from cache could you be more precise about which header do that please ?) Thanks again :) – Gaël Nov 05 '10 at 18:51
  • If you look at the Chrome resources panel, set to "size" mode, you can click on an image, then the HEADERS tab. You get "200 ok" when you download an image, or you get a "304 not modified" if it's in the cache. JavaScript cannot give you this information. Your timer technique is the only way you can do it. Due to network latency you can't always tell if the time you see represents "200" or "304". You can make an educated guess, but you can't tell for sure. – Diodeus - James MacFarlane Nov 05 '10 at 19:55
  • You may want to look at CSS Sprites as an alternative method to your problem. http://skyje.com/2010/02/css-sprites/ – Diodeus - James MacFarlane Nov 05 '10 at 19:57
  • Thank you for your help, I think I figured it out now and posted the answer for other people. I tried to give you kudos but it seems I'm not an experienced-enough SO user ^^' – Gaël Nov 08 '10 at 09:55
  • 2
    if you're using google chrome, watch out that the devtools option "Disable cache (while DevTools is open)" doesn't bite you when testing for this like it did me – Chris M May 23 '14 at 18:25
1

Sorry for mistaking your answer.

I have done some tests and found the following results: The 304 not modified header only appear when the resource is stale and validated by the server via If-None-Match/If-Modified-Since. When the resource is still fresh and does not require validation, the status code returned is 200 Ok.

However, it seems there is a Age header that indicates resource is being cached. So I guess I could switch to PHP and do something like if status code is 304 or Age header exists then resource is cached. But what if there is no Cache-Control: max-age=xx header ? Is there an Age header anyway as soon as the resource is cached and fresh ?

Will investigate further on Monday and keep it updated here.

Gabriel S.
  • 1,961
  • 2
  • 20
  • 30
  • To people experiencing the same problem: 304 Not Modified is an effective way to figure out if image is valid in user's web cache. When image is still fresh and does not require validation, it is possible to assume the file comes from cache by checking if the 'Age' header exists in a 'Cache-Control: max-age' situation or if the 'Date' header is past the current time in an 'Expires' situation. – Gaël Nov 08 '10 at 09:53