Firefox中JavaScript切换多背景图闪烁的解决方法

Firefox通过JavaScript直接修改background-image时出现闪烁，核心原因是其渲染策略和其他浏览器存在差异——即便图片已预加载，也可能出现短暂加载空白。以下是几个可行的解决方法：

方案一：预加载所有轮播图片 #

页面初始化时就把所有要切换的图片预加载完成，切换时直接读取浏览器缓存，彻底避免加载延迟导致的闪烁。

修改后的JavaScript代码：

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(slide_images);

  setInterval(function() {
    slide_count = ++slide_count % slide_images.length;
    $('.banner').css('background-image', 'url(\'' + slide_images[slide_count] + '\')');
  }, 10000);
});

方案二：双层元素叠加过渡 #

创建两个重叠的横幅元素，通过切换上层元素的背景图和透明度实现平滑过渡，完全绕过直接替换background-image的渲染问题。

修改后的HTML #

<div class="banner-container">
  <div class="banner bg active"></div>
  <div class="banner"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

修改后的CSS #

.banner-container {
  position: relative;
  min-height: 1000px;
}

.banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transition: opacity 0.5s ease-in-out;
}

.banner.active {
  opacity: 1;
  z-index: 1;
}

.banner:not(.active) {
  opacity: 0;
  z-index: 0;
}

.bg {
  background-image: url('https://picsum.photos/id/11/2500/1667');
}

修改后的JavaScript #

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;
var banners = $('.banner');

$(document).ready(function() {
  preloadImages(slide_images);

  setInterval(function() {
    slide_count = ++slide_count % slide_images.length;
    // 给非活跃层设置新背景图
    var inactiveBanner = banners.filter(':not(.active)');
    inactiveBanner.css('background-image', 'url(\'' + slide_images[slide_count] + '\')');
    // 切换两层的活跃状态，实现平滑过渡
    banners.toggleClass('active');
  }, 10000);
});

方案三：优化Firefox缓存策略 #

确保预加载的图片对象不会被垃圾回收，避免Firefox重新请求图片，同时添加Firefox专属的渲染优化属性：

修改预加载函数：

// 全局存储预加载图片，防止被浏览器垃圾回收
window.preloadedImages = [];
function preloadImages(array) {
  for (var i = 0; i < array.length; i++) {
    var img = new Image();
    img.src = array[i];
    window.preloadedImages.push(img);
  }
}

在CSS的.banner类中添加：

image-rendering: -moz-crisp-edges;

内容的提问来源于stack exchange，提问作者Pelin