Will an image with style="display: none" still be downloaded and cached?

Question

I'm trying to figure out a way to cache the next and previous images in my gallery script ... I'm wondering if this is a good way to do it. Also, is there any way to manually specify the cache time for the downloaded image?

Answer 1

display: none images will be downloaded and cached on the client. However, JavaScript already has a well defind way of preloading images:

  var nextImage = new Image();
  nextImage.src = "your-url/newImage.gif";

This will preload an image without displaying it to the user.

Answer 2

I think it will be downloaded, and hence cached, because the images may be loaded before the CSS has even arrived.

If browsers turn out to be too smart, something like position:absolute; left:-9999px; top:-9999px should be a nice alternative.

Answer 3

I’m not sure about cache behaviour with display: none (it probably varies between browsers), but you can get an image into the browser’s cache without displaying it by creating an image objects in JavaScript. The image won’t display until you add it to the page.

var image = new Image();
image.src = 'example.com/image'