Reloading a page with Javascript and your cache

I was caught out using Javascript’s location.reload(true); recently. I have a web-page which is destined to be displayed in a public area on a large screen, which unfortunately has a LARGE, static background image (not my design – promise!). The page must reload fairly frequently, and I don’t want the background image disappearing while it reloads each time.

I have frequently used this function to reload a page automatically, but came unstuck recently when reloading a page with a large background image: the screen looked terrible each time it waited for the image to reload – the background images “disappeared” while it reloaded from the server.

I tried all kinds of trickery trying to manipulate the page header so that it would load the image from the cache. No luck.

Using Firebug, I noticed that when I refreshed the page using f5, I got the result I wanted, but when I left the page to refresh using Javascript, it requested the image from the server.

So I looked a bit closer at the Javascript function and found that it all rests on that innocuous little word “true", which, if you take the time to read the documentation, is the difference between reloading from the server (true), or from the cache (false).

By foxbeefly

PHP / MySQL Developer

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.