Question

我为我的网站创建了一个简单的图像幻灯片。基本上，它只是一个Javascript函数，每5秒运行一次，并更新div元素的CSS“ background-image”属性。它运行良好，但是，我注意到，每次该函数运行以验证映像是否在缓存中时，它都会与服务器联系。每次都会从服务器生成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.5kB），并且即使互联网已断开连接，即使图像已经在缓存中，也会导致幻灯片停止播放。

Answer 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>

如何在不验证缓存的情况下更新背景图像

1 个答案: