使用 javascript 使用多个图像的 Firefox 背景图像转换

Question

我有一个横幅区域，我每 10 秒更改一次背景。问题是，在 Firefox 上，当我使用 javascript 而不是动画更改 background-image 时，它会闪烁一段时间。

转换在除 Firefox 之外的其他浏览器上运行良好（在测试的浏览器中；Chrome、Opera、Safari、Firefox）

有什么方法可以防止这种情况发生吗？

代码;

function preloadImages(array) {
  if (!preloadImages.list) {
    preloadImages.list = [];
  }
  var list = preloadImages.list;
  for (var i = 0; i < array.length; i++) {
    var img = new Image();
    img.onload = function() {
      var index = list.indexOf(this);
      if (index !== -1) {
        list.splice(index, 1);
      }
    }
    list.push(img);
    img.src = array[i];
  }
}

var slide_images = [
  "https://picsum.photos/id/11/2500/1667",
  "https://picsum.photos/id/15/2500/1667",
  "https://picsum.photos/id/17/2500/1667",
  "https://picsum.photos/id/19/2500/1667",
];
var slide_count = 0;

$(document).ready(function() {
  preloadImages(["https://picsum.photos/id/15/2500/1667"]);

  setInterval(function() {
    slide_count = ++slide_count % slide_images.length;
    if (jQuery.inArray(slide_images[slide_count + 1], slide_images) !== -1) {
      preloadImages([slide_images[slide_count + 1]]);
    }
    $('.banner').css('background-image', 'url(\'' + slide_images[slide_count] + '\')');
  }, 5000); //lowered from 10
});

.banner {
  min-height: 1000px;
  color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.bg {
  background-image: url('https://picsum.photos/id/11/2500/1667');
  transition: 2s;
  -webkit-animation: 4s infinite fade;
  -moz-animation: 4s infinite fade;
  -o-animation: 4s infinite fade;
  animation: 4s infinite fade;
}

<div class="banner bg">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

提前致谢。

Answer 1

为其他浏览器添加过渡以平滑过渡

transition: 0.7s all ease;
-webkit-transition: 0.7s all ease;
-moz-transition: 0.7s all ease;
-o-transition: 0.7s all ease;