How to check if a particular resource (e.g. image) is cached by the browser?

Question

I have a resource that is served with Cache-Control: public, immutable , ie I expect the resource to exist in the browser's cache for non-first time visitors.

(Browser support for "immutable" configuration is off-topic.)

How to check if a particular resource (eg image) is cached by the browser without triggering browser to load the resource?

Answer 1

I don't know if there is a way to do this from within code. But if you just want to check if a resource is loaded from cache you can check developer tools like @Yani suggested in comments.

1. On your webpage open developer tools. (F12 or Ctrl+Shift+I (or Cmd+Opt+I if you are on a Mac).
2. Click on the "network" tab.
3. Make sure the checkbox "disable cache" is not checked.
4. Reload the page (F5 or ctrl+r)
5. In the table in the column "size" it has a size or the text "from disk cache"