如何防止某些背景图像缓存答案

【问题标题】：How to prevent some background-images caching如何防止某些背景图像缓存
【发布时间】：2016-09-07 09:31:47
【问题描述】：

添加一些随机数会起作用，但仅适用于 img

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

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

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

【问题讨论】：

标签： html css google-chrome background-image no-cache

【解决方案1】：

同样的技术也适用。

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

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

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

【讨论】：

我不知道...你能给我一些链接以了解更多信息

【解决方案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>

【讨论】：