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

使用动态时间戳作为查询参数生成图像网址您至少需要JavaScript代码才能动态地将最新时间戳添加到背景图像网址并生成如下内容：

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>

如何防止一些背景图像缓存

2 个答案: