Question

I have a javascript widget which indicates the server status with alarm LED picture. The picture is selected by applying appropriate class to DOM element with appropriate style in CSS defined.

The problem is that when server is down, it is unable to provide image file for the style. So, my button just appears empty.

The question is: how to preload the image to browser cache so it can and would display it when server is down?

Answer 1

You can preload the image by creating an img element and assigning the path to the src:

var img = document.createElement('img');
img.src = "/path/to/image";

That’ll put it in cache. I don’t think you even have to put it in the DOM for the browser to load it, but if you want to be absolutely sure, you can do this:

img.style.position = "absolute";
img.style.left = "-10000px";
document.body.appendChild(img);

That loads it, but off-page where the user won’t see it. It might even be best to do that with whatever element you’re actually displaying the image on, and then just move the element to where you need it to be when displaying it, to avoid having the browser send a new GET with an If-Modified-Since when you’re showing it, but in theory if your cache headers are correct the browser shouldn’t want to.