Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 392
ensnare Avatar asked Jan 30 '10 19:01

ensnare


People also ask

Are display none images downloaded?

When image has display: none or is inside an element with display:none , the browser may opt not to download the image until the display is set to another value. Only Opera downloads the image when you switch the display to block . All other browsers download it immediately.

Does display none still load content?

Images or wrapper elements that have display: none set, will still get loaded. So if you want to eg. load a different image for desktop and mobile, you can either: use display: none , but with the loading="lazy" parameter set on img .

Can images be cached?

Image caching essentially means downloading an image to the local storage in the app's cache directory (or any other directory that is accessible to the app) and loading it from local storage next time the image loads.

Does browser automatically cache images?

Yes the browser will cache them, often even when your headers say otherwise.


1 Answers

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.

like image 119
Ilya Volodin Avatar answered Sep 20 '22 08:09

Ilya Volodin