html - 如何防止某些背景图像缓存

Question

添加一些随机数它可以工作，但仅适用于 img

<img src="example.jpg?377489229" />

有什么办法可以防止缓存prp。background-image?

<div style="background-image: url(example.jpg  )"></div>"

Answer 1

同样的技术将在那里工作。

<div style="background-image: url(example.jpg?377489229)"></div>

假设您的服务器在该 GET 参数的存在下没有不同的行为。

这只会破坏一次缓存，但如果您希望它始终访问服务器，则需要使用一些不同的技术。

Answer 2

要生成具有动态时间戳作为查询参数的图像 url，您至少需要 JavaScript 代码，该代码将动态地将最新时间戳添加到背景图像 url 并进行如下操作：

someimage.jpg? (new Date()).getTime()    =>   someimage.jpg?1479341018085

您可以使用此示例：

function getNoCacheBgElements() {
  return document.querySelectorAll('.no-cache-bg');
}

function loadBgImageForElement(element) {
  element.style['background-image'] = 
    'url('+ element.attributes['data-background-image'].value + '?' + (new Date()).getTime() +')';
}

function loadBgImages() {
  for(
    var i = 0, elements = getNoCacheBgElements();
    i < elements.length;
    loadBgImageForElement(elements[i]), i++ 
  );
}

window.onload = function() {
  loadBgImages();
};

.size-100x100 {
  min-width: 100px;
  min-height: 100px;
}
   
.float-left {float: left;}
.margin-10 {margin: 10px;}

<p> These background images loaded dynamically every time You hit "Run code snippet". </p>

<div class="no-cache-bg size-100x100 float-left margin-10" data-background-image="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg"></div>

<div class="no-cache-bg size-100x100 float-left margin-10" data-background-image="http://lorempixel.com/output/abstract-q-c-640-480-9.jpg"></div>

<div class="no-cache-bg size-100x100 float-left margin-10" data-background-image="http://lorempixel.com/output/abstract-q-c-640-480-10.jpg"></div>
 
</br>
<p> Check browser's network tab and You'll see that it requests for images on every page load. </p>