ie11 кеширование фоновых изображений при смене стилей

Question

У меня есть DIV, который содержит фоновые изображения, и я меняю их на bootstrap изменение элемента карусели, передавая атрибут 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, которые не обновляют sh изображения из css, и он продолжает отображать тот, который я загружал по умолчанию. Когда я открываю инструменты разработчика и убираю галочку / проверяю декларацию, она отображает правильное изображение. Есть идеи?

Answer 1

Я проверяю в IE и воспроизводлю проблему. В качестве обходного пути вы можете установить background-image в качестве встроенного стиля bg-holder и изменять его при каждом изменении карусели в соответствии со значением bg. Пример кода приведен ниже:

HTML:

<div class="bg-holder" style="background-image: url(image1.jpg)">
  <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:

$('#carousel').on('slide.bs.carousel', function (e) {
    if (e.relatedTarget.dataset.bg == "bg-2") {
        $(".bg-holder").css("background-image", "url(image2.jpg)");
    }
    else {
        $(".bg-holder").css("background-image", "url(image1.jpg)");
    }
})

Вы также можете проверить это онлайн демо в IE 11.