Будет ли изображение с style = "display: none" по-прежнему загружаться и кэшироваться?

Question

Я пытаюсь найти способ кэшировать следующие и предыдущие изображения в моем скрипте галереи ... Мне интересно, является ли это хорошим способом сделать это. Также есть ли способ указать время кэширования загруженного образа вручную?

Answer 1

display: none изображения будут загружены и кэшированы на клиенте. Тем не менее, JavaScript уже имеет четко определенный способ предварительной загрузки изображений:

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

Это позволит предварительно загрузить изображение, не отображая его пользователю.

Answer 2

Я не уверен насчет поведения кэша с display: none (оно, вероятно, зависит от браузера), но вы можете получить изображение в кэш браузера, не отображая его, создав объекты изображения в JavaScript. Изображение не будет отображаться, пока вы не добавите его на страницу.

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

Что касается «есть ли способ вручную указать время кэширования для загруженного изображения?», То есть, но об этом говорится в ответе HTTP, который доставляет изображение в браузер. У Google есть хороший пример: https://developers.google.com/speed/articles/caching

Answer 3

Я думаю, что он будет загружен и, следовательно, кэширован, поскольку изображения могут быть загружены еще до того, как CSS появится.

Если браузеры оказываются слишком умными, то что-то вроде position:absolute; left:-9999px; top:-9999px должно быть хорошей альтернативой.