我为我的网站创建了一个简单的图像幻灯片。基本上，它只是一个每 5 秒运行一次并更新div 元素的 CSS "background-image" 属性的 Javascript 函数。它工作得很好，但是，我注意到每次函数运行时它都会联系服务器以验证图像是否在缓存中。这每次都会从服务器生成 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)，并且如果互联网断开连接，即使图像已经在缓存中，也会导致幻灯片停止工作。
我无法复制您的问题，使用一些 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>