Блог

Главная - Вопросы по программированию - Как обновить фоновое изображение без проверки кэша

Как обновить фоновое изображение без проверки кэша

#javascript #css

#javascript #css

Вопрос:

Я создал простое слайд-шоу с изображениями для своего веб-сайта. По сути, это просто функция Javascript, которая запускается каждые 5 секунд и обновляет свойство CSS «background-image» элемента div. Он работает хорошо, однако я заметил, что он связывается с сервером каждый раз, когда запускается функция для проверки наличия изображения в кэше. Это каждый раз выдает код 304 с сервера.

Изображения, безусловно, будут в кэше, поскольку это изображения, которые уже содержатся где-то еще на той же странице. Следовательно, они уже загружены в кэш при первоначальной загрузке веб-сайта.

Вот упрощенный пример моего кода. Как вы можете видеть, URL-адрес изображения просто извлекается прямо из img элемента, уже загруженного на страницу:

 function update(img) {
     var slideshow = document.getElementById("slideshow");
     slideshow.style.backgroundImage = 'url("'   image   '")';
}

function advance() {
     var img = document.getElementsByClassName("slidesource")[index].src;
     update(img);
     index  ;
}

var index = 0;
advance();
setInterval(advance,5000);

Есть ли способ обновить свойство CSS без необходимости браузеру проверять, находятся ли изображения в кэше?

Проверка того, что они существуют, приводит к потере интернет-данных (хотя и всего около 1,5 КБ на запрос) и приведет к тому, что слайд-шоу перестанет работать, если Интернет отключен, даже если изображения уже находятся в кэше.

Ответ №1:

Я не смог воспроизвести вашу проблему, попробовав ваш код с некоторыми тегами img и тегом div.

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

Решение CSS

 <style>
  #slideshow {
    width: 400px;
    height: 400px;
  }

  .img1 {
    background-image: url("https://picsum.photos/400/400")
  }

  .img2 {
    background-image: url("https://picsum.photos/400/401")
  }

  .img3 {
    background-image: url("https://picsum.photos/400/402")
  }
</style>

<body>

  <div id="slideshow"></div>

</body>

<script>
function update(imgclassName) {
   var slideshow = document.getElementById("slideshow");
   slideshow.classList.remove( slideshow.classList[0] );
   slideshow.classList.add(imgclassName);
}

function advance() {
  update('img' index);
  index  ;
  if (index > NUMBER_OF_IMAGES) {
    index = 1;
  }
}

var NUMBER_OF_IMAGES = 3;
var index = 1;
advance();
setInterval(advance,1000);
</script>
Метки: