CODEWITHSUNDEEP
javascripthtmlcsscaching
ensnare
ensnare

Reputation: 42033

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

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?

Upvotes: 16

Views: 9685

Answers (3)

Paul D. Waite
Paul D. Waite

Reputation: 98816

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

Upvotes: 2

Ilya Volodin
Ilya Volodin

Reputation: 11256

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.

Upvotes: 36

Thomas
Thomas

Reputation: 181785

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.

Upvotes: 1

Related Questions