Estoy tratando de encontrar una manera de almacenar en caché las imágenes siguientes y anteriores en mi script de galería ... Me pregunto si esta es una buena manera de hacerlo. Además, ¿hay alguna manera de especificar manualmente el tiempo de caché para la imagen descargada?¿Se seguirá descargando y almacenando en caché una imagen con style = "display: none"?
display: none las imágenes se descargarán y almacenarán en caché en el cliente. Sin embargo, JavaScript ya tiene una forma bien definida de imágenes de precarga:
var nextImage = new Image();
nextImage.src = "your-url/newImage.gif";
Esto precargar una imagen sin mostrarla al usuario.
Creo que se descargará y, por lo tanto, se almacenará en caché, porque las imágenes pueden cargarse incluso antes de que el CSS haya llegado.
Si los navegadores resultan demasiado inteligentes, algo como position:absolute; left:-9999px; top:-9999px debería ser una buena alternativa.
No estoy seguro del comportamiento del caché con display: none (probablemente varía según el navegador), pero puede obtener una imagen en el caché del navegador sin mostrarlo creando una imagen de objetos en JavaScript. La imagen no se mostrará hasta que la agregue a la página.
var image = new Image();
image.src = 'example.com/image'
En cuanto a “¿hay alguna manera de especificar manualmente el tiempo de caché de la imagen descargada?”, Existe, pero eso se trata en la respuesta HTTP que proporciona la imagen en el navegador. Google tiene un buen manual sobre eso: https://developers.google.com/speed/articles/caching
Esto es posible con JavaScript, pero en realidad me gusta más esta solución (si funciona). – Thomas