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 es 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 wele !

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

Gaël

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 es 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 wele !

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

Gaël

• javascript
• image
• caching
• time
• loading

• Please could you share you JavaScript? – Eazy Commented Jul 15, 2012 at 13:10

2 Answers 2

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.

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