Will an image with style=“display: none” still be

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

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 2

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'

Regarding “is there any way to manually specify the cache time for the downloaded image?”, there is, but that’s dealt with in the HTTP response that delivers the image to the browser. Google has a good primer on that: https://developers.google.com/speed/articles/caching

Answer 3

display: none images will be downloaded and cached on the client. However, JavaScript already has a well-defined 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.