ie11更改样式时缓存背景图像

Question

我有一个保存背景图像的DIV，并通过如下所示传递data-bg属性，通过引导轮播项目更改来更改它们：

HTML

<div class="bg-holder" data-bg="bg-1">
  <div id="carousel">
    <div class="carousel-item active" data-bg="bg-1">
      .... some slider content
    </div>
    <div class="carousel-item" data-bg="bg-2">
      .... some slider content
    </div>
  </div>
</div>

JS

const bgHolder= document.querySelector(".bg-holder");
$('#carousel').on('slide.bs.carousel', function (e) {
  bgHolder.dataset.bg = e.relatedTarget.dataset.bg;
})

CSS

.bg-holder[data-bg="bg-1"] {
  background-image: url(image1.jpg)
}
.bg-holder[data-bg="bg-2"] {
  background-image: url(image2.jpg)
}

我默认设置data-bg =“ bg-1”，然后在每次轮播更改时，我都会传递新的data-bg值。它在除IE11之外的所有现代浏览器中都很好用，IE11不会从css刷新图像，并且会一直显示默认情况下加载的图像。当我打开开发人员工具并取消/选中声明时，它将显示正确的图像。有什么想法吗？

Answer 1

我在IE中进行测试并重现该问题。解决方法是，可以将background-image设置为bg-holder的内联样式，并根据bg的值在每次轮播更改时对其进行更改。示例代码如下：